react-directory-category

An article directory component for react. As long as the article DOM node is passed as a parameter, it can automatically generate a directory

Install

npm i react-directory-category

or

yarn add react-directory-category

Usage

First import into the project:

import Directory from 'react-directory-category';

Used is JSX:

 <Directory directory={this._test} rule={['h1','h2','h3']}

Custom style

The 'rule' can also be written like this to customize the style of each hierarchy:

rule={{'h1':{},'h2':{padingLeft:'20px'},'h3':{paddingLeft:'30px'}}}

When the type is an array, the default style is used. When the type is an object, the style must be passed in. It can be empty like this:

rule={{'h1':{},'h2':{},'h3':{}}}

This condition is also considered as the default style. Or you can customize the style in CSS:

If your rule is ['h1','h2','h3']

.directory-h1{
    padding-left:10px;
}
.directory-h2{
    padding-left:20px;
}
.directory-h3{
    padding-left:30px;
}

API

Parameter | Explain|Type|default ---|---|---|--- directory | The DOM node of the article|ReactNode|- rule | Rules for generating directories|Object/Array|['h1','h2','h3']