Using component store with codegen

Often, when you are using component store components with codegen, you will need to install the corresponding npm library yourself into your app.

The philosophy of codegen is generally that you are wanting much greater control over what exactly goes into your app and codebase. This includes the introduction of these third-party npm libraries into your app. (If you are using the Headless API, by contrast, any dependencies will be baked into the bundle that is loaded over the API.)

For instance, say you want to use the react-slick Slider component in your Plasmic project. You can do so as follows:

  1. Create a blank Plasmic project.

  2. Insert a react-slick Slider from the component store.

  3. Run npx create-plasmic-app@latest just-slider.

  4. Run npm install react-slick slick-carousel.

  5. Add the following to your _app.tsx:

    Copy
    import 'slick-carousel/slick/slick.css';
    import 'slick-carousel/slick/slick-theme.css';

See a complete repo showing the end result at https://github.com/plasmicapp/just-slider.

Was this page helpful?

Have feedback on this page? Let us know on our forum.