✨ Display inline notes in your schemas ✨ Now Ready for Sanity Studio V3
Run the following command in your studio folder using the Sanity CLI:
npm i sanity-plugin-note-field
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...' } }
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
|
nickdimatteo.com · Github @ndimatteo · Github @svey · Instagram @ndimatteo