@mapbox/hast-util-to-jsx

Transform HAST to JSX

Stats

StarsIssuesVersionUpdatedCreatedSize
@mapbox/hast-util-to-jsx
8291.0.0a year ago4 years agoMinified + gzip package size for @mapbox/hast-util-to-jsx in KB

Readme

@mapbox/hast-util-to-jsx

Transform HAST to JSX.

Installation

npm install @mapbox/hast-util-to-jsx

Usage

const h = require('hyperscript');
const toJsx = require('@mapbox/hast-util-to-jsx');

const tree = h('div.one.two', id: 'bar' }, [
  h('p.hidden', { ariaHidden: true }, ['hidden text']),
  h('p', { style: 'color: pink; font-size: 2em;' }, ['fancy text'])
]);

console.log(toJsx(tree));

Yields (with whitespace collapsed):

<div className="one two" id="bar">
  <p className="hidden" aria-hidden={true}>hidden text</p>
  <p style={{color: "pink", fontSize: "2em"}}>fancy text</p>
</div>

A few libraries exist to transform HTML to JSX. Using this util, you can perform that transformation entirely within the ecosystem of unified syntax trees, using rehype to parse HTML and this util to stringify the tree into JSX.

Related

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.