@noaignite/react-utils: createRenderBlock

`createRenderBlock`

createRenderBlock is a utility function for registering the to-be rendered blocks and corresponding data adapters. Returns the renderBlock function which in turn does the actual rendering of the blocks provided it receives data matching the interface of the registered block components.

@param blocks - A Record of components which are rendered based on the data provided to renderBlock.
@param options - An optional configuration object for the renderer.
@param options.adapters - A Record of functions with keys matching that of provided blocks. Adapters are for transforming or enriching data before it is passed to the block component. An adapter function will run as long as its name matches that of a registered block component.
@param options.defaultProps - A Record of objects with keys matching that of provided blocks. Default props are applied before any adapter and override block component default props. Useful for when instantiating multiple renderBlock functions where the blocks should behave differently.
@param options.globals - Globals are meant to be the place where one can register needed utils that all adapters should have access to.
@param options.wrapper - An optional function for wrapping the rendered block component.
@returns renderBlock function.

Example


const blocks = {
  Hero: HeroComponent,
}
 
const adapters = {
  Hero: async (props: HeroData['props'], context, globals): Promise<HeroProps> => {
    const { locale } = context
    const { LinkComponent } = globals
 
    const data = (await fetch( `https://domain.com/${locale}/posts/1`).then((res) => {
      return res.json()
    })) as { title: string }
 
    return {
      ...props,
      LinkComponent,
      title: `${props.title} - ${data.title}`,
    }
  }
}
 
const defaultProps = {
  Hero: { color: 'brand1' },
}
 
const globals = {
  LinkComponent: Link,
}
 
const renderBlock = createRenderBlock(blocks, {
  adapters,
  defaultProps,
  globals,
  wrapper: ({ children }, context) => (
    <section data-render-index={context.index}>{children}</section>
  ),
})
 
const blocksData = [{
  blockType: 'Hero' as const,
  props: { title: 'Hello World!' },
}]
 
const blocks = await Promise.all(blocksData.map(renderBlock))

`RenderBlockTypeMap`

See source on Github

The interface that block data needs to conform to.

`RenderBlockAdapter`

See source on Github

Adapter function used to transform block data before it is passed to the registered block component.

`RenderBlockInjectedProps`

See source on Github

Props injected by renderBlock for every rendered block.

These values are included in adapter input and wrapper props. Adapters are responsible for the final component props, so adapter output may omit or override these values before the component is rendered.

`RenderBlockWrapper`

See source on Github

Wrapper function used to decorate the rendered block element.

The wrapper receives renderer-injected block metadata plus children, along with the same context and globals available to adapters.

`_createRenderBlock`

See source on Github

A wrapper around createRenderBlock to give the posibility to define the TContext interface. This is currently a workaround as there is currently no way in typescript to partially provide generics while having the rest self-infer.