Sanity Note Fields

✨ Display inline notes in your schemas ✨ Now Ready for Sanity Studio V3

Install

Run the following command in your studio folder using the Sanity CLI:

npm i sanity-plugin-note-field

Usage

Add it to your Sanity config new in V3.

import { note } from 'sanity-plugin-note-field'

export default createConfig([
	{
		name: 'default',
		title: '',
		projectId: '',
		dataset: '',
		basePath: '',
		plugins: [
			note()
		],
		schema: {
			types: schemaTypes
		}
	}
])

Use it in your schema types:

{
  name: 'note',
  type: 'note',
  options: {
    message: 'Your custom Message...'
  }
}

Options

When using an HTML message in Typescript ensure you're in a .tsx file. You can also customize the color, add an icon and/or headline:

import React from 'react'

...

{
  name: 'gridNote2',
  type: 'note',
  options: {
    icon: FiAlertCircle,
    headline: 'Hold up!',
    message: <>A custom HTML message: <a href="#0" target="_blank">click here</a></>,
    tone: 'caution'
  }
}

Name	Type	Default	Description
icon	Component	null	Specify an Icon Component, just as you would for your schemas
headline	string	null	Displays a headline above your note message
message	string	null	Required. Your note message (accepts HTML)
tone	string	primary	Color style for your note, based on the Sanity UI Card options. Values: default transparent positive caution critical brand

License

MIT

nickdimatteo.com  ·  Github @ndimatteo  ·  Github @svey  ·  Instagram @ndimatteo