https://github.com/ndimatteo/sanity-plugin-note-field
Custom Note Fields for Sanity
https://github.com/ndimatteo/sanity-plugin-note-field
sanity sanity-plugin sanity-studio
Last synced: 6 months ago
JSON representation
Custom Note Fields for Sanity
- Host: GitHub
- URL: https://github.com/ndimatteo/sanity-plugin-note-field
- Owner: ndimatteo
- License: mit
- Created: 2021-03-09T17:10:37.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-02-28T16:40:14.000Z (over 2 years ago)
- Last Synced: 2025-04-03T16:43:05.238Z (6 months ago)
- Topics: sanity, sanity-plugin, sanity-studio
- Language: TypeScript
- Homepage:
- Size: 600 KB
- Stars: 44
- Watchers: 2
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Note Fields for Sanity
Display inline notes within your schemas
✨ uses Sanity UI ✨ multiple styles ✨ dark mode compatible ✨
## 🔌 Install
```sh
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](https://github.com/ndimatteo/sanity-plugin-note-field/tree/studio-v2).
## ⚙️ Configure
```ts
// `sanity.config.ts` / `sanity.config.js`:
import { defineConfig } from 'sanity'
import { noteField } from 'sanity-plugin-note-field'
export default defineConfig({
// ...
plugins: [
// ...
noteField(),
],
})
```
## 🗒️ Usage
```js
defineField({
title: 'Important!',
description: 'a custom Message...',
name: 'myCustomNote',
type: 'note',
options: {
icon: () => ,
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](https://www.sanity.io/ui/docs/primitive/card#properties) tone values. Defaults to `primary`.* |
## 🧪 Develop & test
This plugin uses [@sanity/plugin-kit](https://github.com/sanity-io/plugin-kit)
with default configuration for build & watch scripts.
See [Testing a plugin in Sanity Studio](https://github.com/sanity-io/plugin-kit#testing-a-plugin-in-sanity-studio)
on how to run this plugin with hotreload in the studio.
## 🤝 License
### MIT
> [nickdimatteo.com](https://nickdimatteo.com) ·
> Github [@ndimatteo](https://github.com/ndimatteo) ·
> Instagram [@ndimatteo](https://instagram.com/ndimatteo)