How to add props to a component in the editor?

Plasmic Studio Questions
1

Hi there, I’m trying to figure out how to add props to a component in the editor is that possible?

2

Hi, you can right-click any prop or attribute on an element inside of that component, and Link (expose) it as a prop on that containing component

3

@yang I right clicked on background and there is no expose option

image.png

4

Sorry, it’s not available for styles, only for props and attributes which is a section toward the top.

If you want to allow different component instances to specify different styles, would using variants or slots satisfy your case?

5

@yang I think variants could work, but what if I want to have a component whose background color changes dynamically from code without being restricted by the defined colors in variants? is that possible?

6

Yes, you can do that from code by passing in overrides. Are you using codegen or the API? Using API as an example:

<PlasmicComponent
  component="Flag"
  componentProps={{
    nameOfSomeElementInside: {
      styles: { background: 'red' }
    }
  }}
/>
7

Got it, yeah that’s what I was looking for

8

Thanks!

9

@yang I have another question, I opened a demo project and some of the components have a tooltip explaining what they do and some other does not have it, Are TextInput and Button some kind of special components? or is it possible to add that tooltip to any other component?

image.png

10

Those components also have a custom view with examples on the API explorer

image.png
image.png2330×1200 98.9 KB

11

Yes they are special, since they have built-in behavior.

And not yet - we’ll work on letting you add component descriptions to other components (starting with code components)

12

Awesome thanks!