Stuck at code component registration process

One additional question, I assume that the registration calls are only important for the Plasmic Studio to work, I could remove them from what gets deployed in production ?

You could remove them, but it would stop working in studio and you wouldnt be able to edit the site correctly anymore :disappointed:

We don’t have anything for material UI, but we have chakra UI and antd registrations. You can check all the registrations we currently have in here
https://github.com/plasmicapp/plasmic/tree/master/plasmicpkgs

Maybe if you ask in general someone might be willing to share their registrations for material UI

Great ! I will have a look.

I try to register a prop called “size” for which only a choice from 3 values is possible but it gives a registration error.
registerComponent(Button, {
name: “Button”,
props: {
variant: “string”,
children: “string”,
color: “string”,
href: “string”,
size: [“small”, “medium”, “large”] },
displayName: “MUIButton”,
description: “Button component of the Material UI library”,
importPath: ‘@mui/material’,
isDefaultExport: true
});

image.png

You can check here the available prop types:
https://docs.plasmic.app/learn/code-components-ref/#prop-types

For this case, what you want to do is:

size: {
   type: "choice",
   options: ["small", "medium", "large"]
}

Ok thanks … I was too quick to ask you and found the information as well … that’s because you are too fast to answer me and I got lazy … thanks :slightly_smiling_face:

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

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

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

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’ ?

Yes!

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

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

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

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

ok

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