@sanity/types

What is @sanity/types?

@sanity/types is a TypeScript library that provides type definitions for Sanity's content platform. It helps developers to define and work with the types of content schemas, documents, and other entities within the Sanity ecosystem.

What are @sanity/types's main functionalities?

Schema Type Definitions

This feature allows you to define the structure of your content types in a strongly-typed manner. The code sample demonstrates how to define a simple schema with a document type 'post' that has a 'title' field of type 'string'.

const schema: Schema = { name: 'mySchema', types: [{ name: 'post', type: 'document', fields: [{ name: 'title', type: 'string' }] }] };

Document Type Definitions

This feature provides type definitions for documents stored in Sanity. The code sample shows how to define a document of type 'post' with an ID and a title.

const post: SanityDocument = { _id: 'post1', _type: 'post', title: 'Hello World' };

Field Type Definitions

This feature allows you to define individual fields within your content types. The code sample demonstrates how to define a 'title' field of type 'string'.

const titleField: StringField = { name: 'title', type: 'string' };

Other packages similar to @sanity/types

contentful

Contentful is a content management system that provides a similar set of functionalities for defining and managing content types and documents. It offers a rich set of APIs and SDKs for various programming languages, including TypeScript, to work with content models and entries.

prismic-javascript

Prismic is another headless CMS that allows you to define and manage content types and documents. The prismic-javascript package provides a JavaScript/TypeScript SDK for interacting with the Prismic API, offering similar functionalities to @sanity/types for defining and working with content schemas and documents.

strapi

Strapi is an open-source headless CMS that provides a flexible and customizable content management system. It allows you to define content types and manage content through a user-friendly interface. Strapi also offers TypeScript support for defining and working with content models and entries.

README

Usage

Regular list

import type React from 'react'
import {List, Item} from 'part:@sanity/components/lists/default'

function renderItem(item, index) {
  return <Item className="myListItem">{item}</Item>
}

function MyComponent() {
  return <List className="myList" items={['a', 'b', 'c']} renderItem={renderItem} />
}

Sortable list

import {List, Item, DragHandle} from 'part:@sanity/components/lists/sortable'
;<List className="myList">
  <ListItem>
    <DragHandle />
    Hello this is sortable list item
  </ListItem>
</List>

Grid list

import {List, Item} from 'part:@sanity/components/lists/grid'
;<List className="myGridList">
  <ListItem>Hello this is grid list item #1</ListItem>
  <ListItem>Hello this is grid list item #2</ListItem>
  <ListItem>Hello this is grid list item #3</ListItem>
</List>

Sortable grid list

import {List, Item} from 'part:@sanity/components/lists/sortable-grid'
;<List className="myGridList">
  <ListItem>
    <DragHandle />
    Hello this is sortable grid list item #1
  </ListItem>
  <ListItem>
    <DragHandle />
    Hello this is sortable grid list item #2
  </ListItem>
  <ListItem>
    <DragHandle />
    Hello this is sortable grid list item #3
  </ListItem>
</List>

Custom drag handle

To create a custom drag handle, you can import the custom createDragHandle function. This works for both regular sortable lists and sortable grid lists.

import {List, ListItem, createDragHandle} from 'part:@sanity/components/lists/sortable'

const MyDragHandle = createDragHandle(<span>Drag me!</span>

<List className="myGridList">
  <ListItem>
    <MyDragHandle />
    Hello this is sortable list item #1
  </ListItem>
  <ListItem>
    <MyDragHandle />
    Hello this is sortable list item #2
  </ListItem>
  <ListItem>
    <MyDragHandle />
    Hello this is sortable list item #3
  </ListItem>
</List>