This is the React Color Picker field for Hygraph, powered by React Color package.

Requirements

To use this app, certain pre-requisites have to be met:

• You must have a Hygraph account. If you don't have one, you can create one here.
• You must have a Hygraph project. If you don't have one, check the starters.

Install the React Color Picker field

Click here to install React Color Picker App on Hygraph, then follow these steps:

1. In the dropdown, select which project you want to install the app in, then click on the Add App button. You should be redirected to your Hygraph project dashboard.
2. Click on the Save button to finish the installation. A pop-up notification in the lower right corner of the screen will indicate that the changes have been saved.

Add the React Color Picker field to your model

1. Navigate to the Schema builder.
2. Select the model that you would like to add the React Color Picker field to.
3. Select the React Color Picker field from the Add fields right sidebar.
4. Complete the Display name field, and the API ID will be auto-filled by the system. Optionally, you can also add a Description. This screen allows you to control different properties of your React Color Picker field: you can allow multiple values, by selecting the checkboxes under the Field options section of the screen.
5. Optionally, you can also add the Colors you want to allow the users to pick on your field, like your brand colors. If you don't need it, just leave this field blank.
6. Click on the Create button.

Use the React Color Picker field in your Hygraph project

1. Navigate to the Content editor.
2. Select the model that you configured the React Color Picker field for.
3. Click on the + Create entry button or, alternatively, edit an existing entry.
4. Locate the React Color Picker field of the screen and click on any color to select it.
5. Now that the color has been added to the entry, you can click on Save or Save & Publish, as needed.

🤝 Contributing

Thanks for being interested in contributing!

We're so glad you want to help! All types of contributions are welcome, such as bug fixes, issues, or pull requests.

Contributors

• @castroalves Cadu de Castro Alves
• …and you?