React TEI Router

Render TEI files intuitively in React.js using custom routes for TEI elements.

The main components TEIRender takes in a DOM object and custom routes can be defined to attach components to elements in the DOM by name.

For TEI rendering we recommend generating the DOM Object with CETEIcean. See the example in examples/ceteicean.js for usage.

Usage

const domData // a DOM object, e.g. generated with CETEIcean.

<TEIRender data={domData}>
  <TEIRoute el='tei-teiheader' component={Header}/>
  <TEIRoute el='tei-notatedmusic' component={NotatedMusic}/>
  <TEIRoute el='tei-media' component={Media}/>
  <TEIRoute el='tei-ref' component={Reference}/>
  <TEIRoute el='tei-persname'>
    <LinkToIndex type='indexOfPersons'/>
  </TEIRoute>
</TEIRender>

Now custom components ("routes") can be defined for teiHeader, notatedMusic, media etc., for example:

const Reference = (props) => {
  const target = props.teiNode.getAttribute('target')

  return (
    <Link to={target}>
      {props.children}
    </Link>
  )
}

To continue applying routes to children, the API exposes TEINode for single nodes and TEINodes for DOM NodeLists. Make sure to pass the rest of the properties to keep applying routes to children nodes.

const Reference = (props) => {
  const target = props.teiNode.getAttribute('target')

  return (
    <Link to={target}>
      {<TEINodes teiNodes={props.teiNode.childNodes} {...props} />}
    </Link>
  )
}

It is also possible to specify a route to match text nodes using the keyword text():

<TEIRoute el='text()' component={TextNodeHandler}/>