@tomisin.dev/react-table-of-content
TypeScript icon, indicating that this package has built-in type declarations

2.0.15 • Public • Published

@tomisin.dev/react-table-of-content

A simple and hassle-free table of content component for HTML based contents, in ReactJS applications.

NPM JavaScript Style Guide

Install

npm install --save @tomisin.dev/react-table-of-content

Usage

Class Component

import React, { Component } from 'react'

import TableOfContent from '@tomisin.dev/react-table-of-content'

const htmlContent = `<html>
  <article>
    <h2>Heading One</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
    <h2>Heading Two</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <h2>Heading Three</h2>
    <h3>Sub heading one</h3>
    <p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <h3>Sub heading two</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <h4>Sub sub heading one</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <h4>Sub sub heading two</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </article>
</html>
`

class Example extends Component {
  render() {
    return <TableOfContent
      content={htmlContent}
    />
  }
}

Functional Component

...

const App = () => {
  return <TableOfContent
    content={htmlContent}
  />
}

Screenshots

Input

a sample HTML page showing an article that has several header tags

Output

a sample HTML page depicting the header tags extracted from the article

License

MIT © CodeLexis

Package Sidebar

Install

npm i @tomisin.dev/react-table-of-content

Weekly Downloads

13

Version

2.0.15

License

MIT

Unpacked Size

967 kB

Total Files

18

Last publish

Collaborators

  • tomisin.dev