1.1.0 • Published 1 month ago
@hatchd/sanity-plugin-color-select v1.1.0
Color Select - A color palette plugin for Sanity
Allow users to select pre-determined colours via a color palette in Sanity.
This is a Sanity Studio v3 plugin, the plugin will not work versions 2 and lower.
Installation
// NPM
npm install @hatchd/sanity-plugin-color-select
// Yarn
yarn add @hatchd/sanity-plugin-color-select
Usage
Add it as a plugin in sanity.config.ts
(or .js):
import {defineConfig} from 'sanity'
import {ColorSelect} from '@hatchd/sanity-plugin-color-select'
export default defineConfig({
//...
plugins: [ColorSelect()],
})
And create a field in Sanity. It returns the value
property of the selected color.
export const backgroundColors = [
{
title: 'Green',
hex: '#8ac926',
value: 'primary',
},
{
title: 'Blue',
hex: '#57c4e5',
value: 'secondary',
},
{
title: 'Red',
hex: '#d62828',
value: 'tertiary',
},
];
defineField({
name: 'background',
description: 'Controls the background colour for this module',
type: 'colorSelect',
options: {
list: backgroundColors,
labels: false,
},
initialValue: 'primary',
}),
Options
Property | Description |
---|---|
list (array) | A array of objects containing the properties title , hex and value . hex is used if the value isn't a color hex code. |
layout (string) | buttons and dropdown . Default: buttons |
labels (boolean) | While using the buttons layout, display labels or not. Default: true |