Stuck at code component registration process

Developer Support
21

I created a route in the index.js file where the component PlasmicCanvasHost is called

22

you can register it in that same file. It just needs to be exeuted before that

23

in the index.js file

24

so I make the registerComponent calls in the index.js file … ok

25

is a “plasmic-init.js” alternative to that ?

26

plasmic-init is a file that we create autoamtically for you if you use our CLI to create your project

You can check it here
https://docs.plasmic.app/learn/quickstart-cli

27

Ah ok … to confirm. The importPath prop is the same as in the import statement if I want to use the component.
For instance to use the Button component from the MUI library, I import { Button } from ‘@mui/material’
So the importPath = ‘@mui/material’ ?

28

Yes!

29

And the name is the { } part, and if it’s the default export, remember to check the isDefaultExport flag!

30

is the name prop or the first argument of the RegisterComponent function ?

31

that must match the name of the component in the library ?

32

the importName prop.
The first argument should be the component itself, in this case Button

33

ok

34

The docs for our component registration API can be found here https://docs.plasmic.app/learn/code-components-ref/

35

awesome ! it works … yepee … I’m able to add Material UI button directly in plasmic studio … now I need to figure out how I can change the button label … I guess I haven’t registered all the props I need (only exposed “variant”)

36

You can probably expose the prop children as a slot (or label, I don’t know how it is set up in material UI)

37

yes that’s what I found in the MUI API doc

38

children

39

don’t you have “standard”/template registration call for most used UI components from major libraries ?

40

(happy to recode everything but :slightly_smiling_face: )