block-content-to-react

Render an array of block text from Sanity with React or React Native.

Installing

``
npm install --save @sanity/block-content-to-react
`

Usage

`js
const React = require('react')
const ReactDOM = require('react-dom')
const BlockContent = require('@sanity/block-content-to-react')
const client = require('@sanity/client')({
projectId: '',
dataset: '',
apiVersion: '2021-03-25',
useCdn: true,
})

const serializers = {
types: {
code: (props) => (


        {props.node.code}
      

client.fetch('*[_type == "article"][0]').then((article) => {
ReactDOM.render(
,
document.getElementById('root')
)
})
`

PropTypes

- className - When more than one block is given, a container node has to be created. Passing a className will pass it on to the container. Note: see renderContainerOnSingleChild.
- renderContainerOnSingleChild - When a single block is given as input, the default behavior is to not render any container. If you always want to render the container, pass true.
- serializers - Specifies the React components to use for rendering content. Merged with default serializers.
- serializers.types - Serializers for block types, see example above
- serializers.marks - Serializers for marks - data that annotates a text child of a block. See example usage below.
- serializers.list - React component to use when rendering a list node
- serializers.listItem - React component to use when rendering a list item node
- serializers.hardBreak - React component to use when transforming newline characters to a hard break (
by default, pass false to render newline character)
- serializers.container - Serializer for the container wrapping the blocks
- serializers.unknownType - Override the default serializer for blocks of unknown type, if ignoreUnknownTypes is set to false (the default).
- serializers.unknownMark - Override the default serializer for marks of unknown type. Defaults to a span without any styling.
- imageOptions - When encountering image blocks, this defines which query parameters to apply in order to control size/crop mode etc.
- ignoreUnknownTypes - By default (or when setting this property explicitly to true) it will output a hidden