Skip to content

React component for HTML structures based on a string, react component or DOM node

License

Notifications You must be signed in to change notification settings

autarc/react-htmltree

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

js-standard-style

React HTMLTree

TreeView for HTML/XML structures

The motivation for this component was the lack of a standalone TreeView for HTML documents, which can be easily integrated. Existing solutions are often tightly coupled into specific projects or don't provide necessary customizations options. While its original is based on the TreeView implementation of react-devtools, additional improvements regarding performance and usability were done.

Checkout the example in your browser.

Chrome DevTools Firefox DevTools - Light Firefox DevTools - Dark
Chrome DevTools Theme Firefox DevTools Theme - Light Firefox DevTools Theme - Dark

Features

  • standalone react module with inline style definitions
  • default themes include 'Chrome' and 'Firefox' visuals
  • mimics common devtools behavior (like history or uncollapse all descendants)
  • supports universal rendering through difference source types
  • keeps synchronized with the DOM if an HTML element is referenced

Use Cases

  • document viewer
  • devtools extension
  • visual debugging
  • interactive markup

How To use

import HTMLTree from 'react-htmltree'

<HTMLTree source={document.documentElement}/>

source: Text | React Component | HTMLElement

Handle Events

<HTMLElement source={document.documentElement} onSelect={handleSelect}/>

// others events include: 'hover', 'expand' and 'unfocus'
function handleSelect (element, component) {
  console.log(element)
}

Use custom renderer

<HTMLElement source={'<ul><li>1</li><li>2</li></ul>'} customRender={customRender}/>

// create wrapper around the matched components
function customRender (decorate, node) {
  return decorate(function (Component) {
    if (node.name === 'script') {
      return (
        <div style={{ backgroundColor: 'red' }}>
          <Component {...Component.props}/>
        </div>  
      )
    }
  })
}

Further examples can be found here.

Development

To build your own version run npm run dev for development (incl. watch) or npm run build for production (minified).

TODO

  • extend example page with style generator
  • checkout memory issue after theme change
  • only render elements in the current viewport (reuse DOM nodes)
  • allow object declaration for a styling a custom theme regarding freestyle
  • prevent duplicate inline style imports for the select theme
  • extend documentation (react-docgen)
  • add tests for the component using (enzyme)
  • checkout the original styles of the developer tools (chrome ? firefox ?)
  • support syntax highlighting for inline scripts / style elements
  • check rendering using web worker for more efficient updating (diff checks) ~ react-worker-dom / #3092
  • adapt further features from browser devtools:
    • wrap dotted border around each specific (firefox)
    • tags with no content are less saturated (firefox)

About

React component for HTML structures based on a string, react component or DOM node

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published