@modernaut/payload-color-swatch-field NPM

payload-color-swatch-field

A color swatch field for Payload 3

Installation

npm i @modernaut/payload-color-swatch-field

NOTE: At the time of writing this, you may experience package conflicts with Payload Beta. You may need to use npm i with --force

Usage

import type { CollectionConfig } from "payload";
import { colorSwatchField } from "@modernaut/payload-color-swatch-field";

const Lorem: CollectionConfig = {
  slug: "lorem",
  admin: {
    useAsTitle: "title",
  },
  fields: [
    {
      name: "title",
      type: "text",
      required: true,
    },
    colorSwatchField({
      defaultColors: ['#000000', '#777', '#ffffff', 'bg-amber-500', 'bg-teal-500', 'bg-violet-500', 'text-amber-700', 'text-teal-700', 'text-violet-700'],
      overrides: {
        required: true,
      },
    }),
  ],
};

export default Lorem;

Options

defaultColors: Provide an array of color options (supports hex and Tailwind colors)
lockDefaultColors: Enable to ensure default color options can't be removed by users (default: true)
allowNull: Adds a null option to default colors (default: true)
allowUserPreferences: Enable to allow users to remove and add colors and build their own palette (default: true)
useGlobalPreferences: Disabling this will allow custom user color options on a per-field basis (default: true)
allowTailwindColors: Enable to allow Tailwind color options (default: true)
tailwindColorWhitelist: Provide a list of Tailwind color options. NOTE: You must specify the full color class (e.g. 'text-amber-700' vs 'amber-500') in order for Tailwind to detect/generate the proper colors in its CSS. Otherwise, you'll need to safelist the full class in your tailwind config file. See https://tailwindcss.com/docs/content-configuration#safelisting-classes for more details (default: all bg and text Tailwind colors are allowed)
allowHexColors: Enable to allow hex colors (default: true)
overrides: Any Payload field type overrides