🔌 Install

yarn add sanity-plugin-note-field
# or npm
npm i sanity-plugin-note-field

Warning This is a Sanity Studio V3 plugin. For the V2 version, please refer to the studio-v2 branch.

⚙️ Configure

// `sanity.config.ts` / `sanity.config.js`:
import { defineConfig } from 'sanity'
import { noteField } from 'sanity-plugin-note-field'

export default defineConfig({
  // ...
  plugins: [
    // ...
    noteField(),
  ],
})

🗒️ Usage

defineField({
  title: 'Important!',
  description: 'a custom Message...',
  name: 'myCustomNote',
  type: 'note',
  options: {
    icon: () => <Warning size={20} weight="duotone" />,
    tone: 'caution',
  },
})

Properties

| Name | Type | Description | | -------- | ------------------------- | ---------------------------------------------------------------------------- | | type | string | (Required) Value must be set to note. | | name | string | (Required) The field name. This will be the key in the data record. | | title | string | (Optional) Short title, appears in bold above the optional description. | | description | string / React.Component | (Optional) Long form message, displayed under the title. |

Options

| Name | Type | Description | | -------- | --------------------- | ---------------------------------------------------------------------------- | | icon | React.Component | (Optional) Display an icon alongside your note's title/message. Just remember that any schema file with icons in them should have a .jsx or .tsx extension. | | tone | string | (Optional) The color of the note. Accepts any of the Sanity UI Card tone values. Defaults to primary. |

🧪 Develop & test

This plugin uses @sanity/plugin-kit with default configuration for build & watch scripts.

See Testing a plugin in Sanity Studio on how to run this plugin with hotreload in the studio.

🤝 License

MIT

nickdimatteo.com  ·  Github @ndimatteo  ·  Instagram @ndimatteo