Modular creation of the document outline by automating heading level assignment with React components
In modern web development we build pages modularly by using components. However, the way the document outline is implemented in relevant browsers contradicts this modular approach because structure is specified by using various heading ranks (
h6). Therefore the heading level isn't contextual which means that in any given subcomponent you need to know where in the page that component is used in order to know which heading level to specify.
react-document-section provides two components:
DocumentOutlineSectionis the component with which you specify the nesting level. Wrap everything that should be part of a section in this component.
title(node) Specify the title of the section as a property of
DocumentOutlineSection. Be aware however that you need an
Hcomponent to display this title.
His the component which displays the title specified in
DocumentOutlineSection. It's a universal alternative to
h6. Any properties you set in this component are set as attributes of the actual
npm install --save react-document-section
yarn add react-document-section
import React from 'react'import DocumentOutlineSection H from 'react-document-section'const ExampleComponent =<DocumentOutlineSection ="The Main Title"><H ="my-title-class" /><DocumentOutlineSection ="A subsection within the document"><H /><p>Some text</p></DocumentOutlineSection><DocumentOutlineSection ="Another subsection"><H /><DocumentOutlineSection ="A subsection of the subsection"><H /><p>Even more text</p></DocumentOutlineSection></DocumentOutlineSection></DocumentOutlineSection>
Would result in this render output:
The Main TitleA subsection within the documentSome textAnother subsectionA subsection of the subsectionEven more text
You can nest the
DocumentOutlineSection in arbitrary depth.
Running this repo
If you want to check out this repository and run it yourself this is how you do it
Run Rollup to watch your changes in
In another tab start the dev server of the example app.
cd examplenpm start