@mapbox/hast-util-to-jsx

2.1.0 • Public • Published

@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.

Package Sidebar

Install

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

Weekly Downloads

3,501

Version

2.1.0

License

MIT

Unpacked Size

29.2 kB

Total Files

13

Last publish

Collaborators

  • mbx-npm-ci-production
  • mbx-npm-ci-staging
  • mbx-npm-advanced-actions-production
  • mbx-npm-advanced-actions-staging
  • mbx-npm-09-production
  • mbx-npm-08-production
  • mbx-npm-07-production
  • mbx-npm-06-production
  • mbx-npm-05-production
  • mbx-npm-04-production
  • mbx-npm-03-production
  • mbx-npm-02-production
  • mbx-npm-01-production
  • mbx-npm-02-staging
  • mapbox-npm-01
  • mapbox-npm-02
  • mapbox-npm-07
  • mapbox-npm-03
  • mapbox-npm-04
  • mapbox-npm-09
  • mapbox-npm-05
  • mapbox-npm-06
  • mapbox-npm-08
  • mapbox-npm-advanced-actions
  • mapbox-npm-ci
  • mapbox-npm
  • mapbox-admin
  • mapbox-machine-user