@builder.io/widgets
TypeScript icon, indicating that this package has built-in type declarations

1.2.24 • Public • Published

Builder Widgets

Adds widgets for Builder.io editing, such as carousels, tabs, accordions, etc.

How to use it

First, install the package

npm install @builder.io/widgets

When using the React SDK, just

import '@builder.io/widgets';

Anywhere that you render a <BuilderComponent ... />, and now the widgets will register and be available in the editor and when rendering (including server side)

Example

See here for a real working example in our next.js example repo

Lazy Loading

Instead of importing the root @builder.io/widgets which synchronously registers all components, you can asynchrnously import only the widgets used in builder content:

With Next.js

To only dynamically import widgets in next.js:

import '@builder.io/widgets/dist/lib/builder-widgets-async'

Other Frameworks

You'd want to lazy load the widget components explicitly. To do so, , you can register them with your lazy loading library of choice, for e.g Loadable, and these components will only load when used in content, as needed.

import { Builder } from '@builder.io/react';
import { accordionConfig } from '@builder.io/widgets/dist/lib/components/Accordion.config';
import loadable from '@loadable/component';

Builder.registerComponent(
  loadable(() =>
    import('@builder.io/widgets/dist/lib/components/Accordion').then(mod => mod.AccordionComponent)
  ),
  accordionConfig
);

You can also use this same methodology with Suspense as well.

Help and troubleshooting

Questions or feedback - contact us at help@builder.io, we are happy to help!

Readme

Keywords

none

Package Sidebar

Install

npm i @builder.io/widgets

Weekly Downloads

17,666

Version

1.2.24

License

MIT

Unpacked Size

6.69 MB

Total Files

61

Last publish

Collaborators

  • harmeet.builder
  • armela
  • strd6
  • murtaza-haveliwala
  • gustavohgs
  • sanyamkamat
  • shyam-builder
  • manucorporat
  • steve8708
  • samijaber
  • caleb.amsden
  • teleaziz123
  • mrkoreye
  • mhevery
  • adamdbradley