Plugins

Preload

Learn how to use the preload plugin to improve performance

The preload plugin only works for lazy components. Make sure to use lazy loading to use this plugin.

Setup

Import the plugin and add it to the plugins.

import { preloadPlugin } from "better-modal/plugins";

const m = betterModal({
  // ...
  plugins: [preloadPlugin],
});

Usage

Use the preload method to preload the modal component.

// Preload the component
await modals.invoice.add.preload();

// Now opening the modal will be instant
modals.invoice.add.open();

Strategies

On User Interaction

<button
  onMouseEnter={() => modals.invoice.add.preload()}
  onClick={() => modals.invoice.add.open()}
>
  Open Modal
</button>