Style Manager

[matheusbento]

Hey guys, I'm new to using this lib.

I used GrapeJS in the past, in the puck I miss the ability to add styles for div or text for example.

How can I add it?

[chrisvxd]

Hey @matheusbento, thanks for checking us out! There are various ways to solve this problem with Puck.

At it's core, Puck can render fields that you can map user input to props of your component.

For example, you could either use a text (or number) field to create a padding prop like this:

const config = {
  components: {
    Example: {
      fields: {
        padding: {
          type: "number",
        },
      },
      render: ({ padding }) => {
        return <div style={{ padding }}>Hello, world</div>;
      },
    },
  },
};

Or, if you need to apply a subset of classes, use an array and select field combo:

const config = {
  components: {
    Example: {
      fields: {
        classNames: {
          type: "array",
          arrayFields: {
            className: {
              type: "select",
              options: [ 
                {label: "blue-background", value: "blue-background"}
              ] 
            }
          }
        },
      },
      render: ({ classNames }) => {
        return (<div classNames={classNames.map(({ className }) => className.value ).join(' ')}>
          Hello, world
        </div>);
      },
    },
  },
};

Or, if you want a fully blown stylesheet field, you can implement your own using the custom field type. This guide is useful.

const config = {
  components: {
    Example: {
      fields: {
        style: {
          type: "custom",
          render: ( { onChange } ) => <MyStyleSheetInput onChange={onChange} />
        },
      },
      render: ({ styles }) => {
        return <div style={style}>Hello, world</div>;
      },
    },
  },
};