sanity-color-picker

A custom input component for displaying an array of color to pick from.

Usage no npm install needed!

<script type="module">
  import sanityColorPicker from 'https://cdn.skypack.dev/sanity-color-picker';
</script>

README

Sanity Color Picker

Display colors for editors to choose from with this custom input component.

preview image

Installation

  1. npm install sanity-color-picker
  2. In your schema:
import ColorPicker from "sanity-color-picker/lib";

export default {
  title: "Color Picker",
  name: "colorpicker",
  type: "string",
  inputComponent: ColorPicker,
  options: {
    list: [
      { title: "Yellow", value: "#f5c701" },
      { title: "Pink", value: "#f6cedb" },
      { title: "Red", value: "#f16d70" },
      { title: "Teal", value: "#88c6db" },
      { title: "Purple", value: "#aca0cc" },
      { title: "Green", value: "#bdcdcb" },
      { title: "White", value: "#fff" }
    ]
  }
};
  1. Profit. The component returns the selected value.