TEI for React
npm install react-teirouterRender 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.
``JSX
const domData // a DOM object, e.g. generated with CETEIcean.
`
Now custom components ("routes") can be defined for teiHeader, notatedMusic, media etc., for example:
`JSX
const Reference = (props) => {
const target = props.teiNode.getAttribute('target')
return (
{props.children}
)
}
`
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.
`JSX
const Reference = (props) => {
const target = props.teiNode.getAttribute('target')
return (
{
)
}
`
It is also possible to specify a route to match text nodes using the keyword text():
`JSX``