Skip to content

ndimatteo/sanity-plugin-note-field

Repository files navigation

Note Fields for Sanity

Display inline notes within your schemas
✨ uses Sanity UI ✨ multiple styles ✨ dark mode compatible ✨

note-field-v3


🔌 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