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
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
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
});
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
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/