2.0.15 • Published 12 months ago

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

Weekly downloads
-
License
MIT
Repository
github
Last release
12 months ago

@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

2.0.15

12 months ago

2.0.14

1 year ago

2.0.13

1 year ago

2.0.12

1 year ago

2.0.11

1 year ago

2.0.10

1 year ago

2.0.5

1 year ago

2.0.7

1 year ago

2.0.6

1 year ago

2.0.9

1 year ago

2.0.8

1 year ago

2.0.3

2 years ago

2.0.4

2 years ago

2.0.2

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago