sanity-plugin-utils

Handy hooks and clever components for Sanity Studio v3.

Installation

``
npm install --save sanity-plugin-utils
`

or

`
yarn add sanity-plugin-utils
`

Usage

$3

Sanity's real-time APIs power excellent editorial experiences. Your plugins should respond to other users collaborating on documents in real time. This hook is a convenient way to perform a GROQ query that responds to changes, along with built-in loading and error states.

The data variable will be constantly updated as changes are made to the data returned by your query. You can also pass in initial data so that it is set in the first render.

`tsx
import {useListeningQuery} from 'sanity-plugin-utils'

export default function DocumentList() {
const {data, loading, error} = useListeningQuery(
*[_type == $type],
{
params: {type: 'pet'},
initialValue: [],
}
)

if (loading) {
return
}

if (error) {
return {error}
}

return (

{data?.length > 0 ? (
data.map((pet) => {pet.title})
) : (
No Pets found
)}

)
}
`

$3

Hook for getting extended details on all Users in the project. Such as name.

`tsx
import {useProjectUsers} from 'sanity-plugin-utils'

export default function DocumentList() {
const users = useProjectUsers({apiVersion: 2023-01-01})

return (

{users?.length > 0 ? (
users.map((user) => (

))
) : (

)}

)
}
`

$3

Returns a function that will open a document in a new view pane, alongside the current view pane

`tsx
import {useOpenInNewPane} from 'sanity-plugin-utils'

export default function SidePetOpener(pet: SanityDocument) {
const openInNewPane = useOpenInNewPane(pet._id, pet._type)

return openInNewPane()}>{pet.title}
}
`

$3

Returns an image URL builder configured with the current workspace's Project ID and Dataset.

Useful if you have many images in the one component.

`tsx
import {useImageUrlBuilder} from 'sanity-plugin-utils'

export default function PetPics(pet: SanityDocument) {
const builder = useImageUrlBuilder({apiVersion: 2023-01-01})

return (


{pet.pics.map((pic) => (

• 
  src={builder.source(pic).width(200).height(200).url()}
  alt={pic.altText}
  />
  

))}


)
}
`

$3

As above, but pre-configured with an image source.

Useful if you only have one image in your component.

`tsx
import {useImageUrlBuilderImage} from 'sanity-plugin-utils'

export default function PetPic(pet: SanityDocument) {
const image = useImageUrlBuilderImage(pet.image, {apiVersion: 2023-01-01})

return
}
`

$3

Component for consistently displaying feedback in a card with a title, text and an icon.

`tsx
import {Feedback, useListeningQuery} from 'sanity-plugin-utils'

export default function DocumentList() {
const {data, loading, error} = useListeningQuery(
*[_type == "task" && !complete]
)

if (loading) {
return (
tone="primary"
title="Please hold"
description="Fetching tasks..."
/>
)
}

if (error) {
return (
tone="critical"
title="There was an error"
description="Please try again later"
/>
)
}

return data?.length > 0 ? (
tone="caution"
title="There are unfinished tasks"
description="Please get to work"
/>
) : (
tone="success"
title="You're all done"
description="You should feel accomplished"
/>
)
}
`

$3

These components are all @sanity/ui Card's but with their HTML DOM elements and CSS updated to output and behave like tables.

`tsx
import {Table, Row, Cell} from 'sanity-plugin-utils'

export default function Report(documents) {
return (






Name


Price




{documents.map((doc) => (


{doc.title}

caution : primary}>
{doc.price}


))}


)
}
`

$3

A Menu component for searching and interacting with users. Requires Users to be passed into the component.

`tsx
import {UserSelectMenu} from 'sanity-plugin-utils'

export default function Report() {
const users = useProjectUsers({apiVersion: 2023-01-01})
const [selectedUsers, setSelectedUsers] = useState([])

return (
userList={users}
value={selectedUsers}
onAdd={(id) => selectedUsers((current) => [...current, id])}
onRemove={(id) => setSelectedUsers((current) => current.filter((id) => id !== id))}
onClear={() => setSelectedUsers([])}
>
)
}
``

License

MIT © Simeon Griggs
See LICENSE

License

MIT © Simeon Griggs

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.

$3

Run "CI & Release" workflow.
Make sure to select the main branch and check "Release new version".

Semantic release will only release on configured branches, so it is safe to run release on any branch.