block-content-to-hyperscript

Render an array of block text from Sanity with HyperScript.

Installing

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

Usage

`js
const h = require('hyperscript')
const blocksToHyperScript = require('@sanity/block-content-to-hyperscript')
const client = require('@sanity/client')({
projectId: '',
dataset: '',
useCdn: true
})

const serializers = {
types: {
code: props => h('pre', {className: props.node.language}, h('code', props.node.code))
}
}

client.fetch('*[_type == "article"][0]').then(article => {
const el = blocksToHyperScript({
blocks: article.body,
serializers: serializers
})

document.getElementById('root').appendChild(el)
})
`

Options

- 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 functions 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 - Function to use when rendering a list node
- serializers.listItem - Function to use when rendering a list item node
- serializers.hardBreak - Function to use when transforming newline characters to a hard break (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