Using React component library in Plasmic via npm modules

Developer Support
1

I have a React component library that I would like to use in Plasmic via npm modules

Is there documentation that goes over this?

2

We have this example project that demos how to register components from npm for use in Plasmic: https://github.com/plasmicapp/code-components

3

Sorry but I’m still confused where and how it’s done, could you elaborate? :sweat_smile:

4

Are you referring to host.tsx or something else?

5

yes, you’ll need to create an “app-host” that hosts the components for the studio
https://docs.plasmic.app/learn/code-components/#gatsby-focus-wrapper

6

host.tsx is where we host the components for this demo
https://code-components.plasmic.site/host.html

7

Just to clarify, we have to host a local page in order for Plasmic to obtain the code components in Plasmic

8

it can’t be directly imported from npm right?

9

That’s right, you have to set up an app host to register the components from npm and specify what props you want to expose. Often you may also want to wrap the components a bit to make it nicer for users to work with from within Plasmic—you can see us doing this for the ParallaxWrapper, MuiSelect, Tilt, Reveal components for instance.