Configuration

To use Flower to its full potential, you need to configure your components for the visual editor.

Flower allows you to use your components through a graphical interface; each component can have its own properties that can alter its behaviour or style. These properties are decided by you.

For instance you might have a button with two different style variants. When you add it to Flower, you can configure it so that in the visual editor you will see a select element with the two variants you can choose.

Configuring components

To create a configuration for your component, you can either write it from scratch, or use the "Create Component" option in the Flower extension menu.

json config

The configuration is a .json file that should conventionally be saved in the same folder where the .js component is. For instance:

components
└── Button
   ├── flower.json
   └── index.js

The following is a basic configuration.

components/Button/flower.json

{
  "type": "component",
  "name": "Button",
  "editing": [
     {
      "type": "Input",
      "id": "title",
      "label": "Title"
    },
    {
      "type": "Select",
      "id": "buttonType",
      "label": "Variant",
      "options": [
        {
          "name": "Primary",
          "value": "primary"
        },
        {
          "name": "Secondary",
          "value": "secondary"
        }
      ]
    }
  ]
}

The name key must match the component registered previously with Flower.registerComponents().

The editing key contains all the properties that you will be able to configure in the visual editor. In this example, you will be able to write a title in an input element, and to choose a variant from a select element.

js config

You must ensure that the properties you define in the .json config are consumed properly by your component. The React component will receive as props those defined in editing, with the same name specified in id.

For instance:

components/Button/index.js

const Button = ({ title, buttonType }) => (
  <button style={styles[buttonType]}>{title}</button>
)

note

How the React component consumes the props received from Flower graphical interface is totally up to you.

Configuring reducers (deprecated from version 1.3.0)

At present, your reducers need to extend Flower's reducer, one of the main dependencies of Flower. In future releases, this will be no longer necessary.

This node varies between Redux Toolkit and just Redux.

Redux Toolkit

import { set } from 'lodash'

createSlice({
  // Slice config
  extraReducers: {
    '@flower/your_reducer_name/update': (state, { payload }) => set(state, payload.id, payload.value)
  }
})