Jcanno/use-jsx

Use JSX in native

Use-Jsx

English|简体中文

use-jsx can help you use jsx with babel in native JS environment, for developing simple component in page.

Features

• Fragment
• Function Component
• virtual dom tree namespace

How to use

1. Type commands in terminal to install use-jsx:

# with npm
npm install use-jsx

# with yarn
yarn add use-jsx

2. Config babel

use-jsx supports manual import and auto import babel config mode.

• import jsx in manual:

  {
    // you need to install @babel/plugin-transform-typescript if you use TypeScript
    [
      '@babel/plugin-transform-typescript',
      {
        isTSX: true,
        // config X.createElement, X is customized, it's required to be the same in your source code.
        jsxPragma: 'X.createElement',
        // config X.Fragment, X is customized, it's required to be the same in your source code.
        jsxPragmaFrag: 'X.Fragment',
      },
    ],
    [
      '@babel/plugin-transform-react-jsx',
      {
        // config X.createElement, X is customized, it's required to be the same in your source code.
        pragma: 'X.createElement',
        // config X.Fragment, X is customized, it's required to be the same in your source code.
        pragmaFrag: 'X.Fragment',
      },
    ],
  }

  import use-jsx in your source code:

  import * as X from 'use-jsx'

  X needs to be consistent with your babel config.

• import jsx in automatic mode:

  {
    plugins: [
      [
        // you need to install @babel/plugin-transform-typescript if you use TypeScript
        '@babel/plugin-transform-typescript',
        {
          isTSX: true,
        },
      ],
      [
        '@babel/plugin-transform-react-jsx',
        {
          runtime: 'automatic',
          importSource: 'use-jsx',
        },
      ],
    ]
  }

  You don't need import use-jsx anymore, it's all done by babel.

3. Render your jsx

use render to generate Actual DOM to HTML page.

import { render } from 'use-jsx'

render(<div>It's generated by use-jsx</div>, document.body, 'greeting')

// use-jsx support to render function which returns jsx
render(
  <MyComponent customProprs={myProps}></MyComponent>,
  document.getElementById('myDiv'),
  'myComponent',
)

render receives three arguments, first for custom jsx or function which returns jsx, second for real element which jsx mouted, the last is namespace for tree, default by default

4. useDom

if we want to get Actual DOM, useDom can help.

function MyComponent() {
  // useDom offer div actual DOM, so we can do some things such as getting div actual size to `getBoundingClientRect`
  const useDom = (dom) => {
    const domRect = dom.getBoundingClientRect()
  }

  return <div id={POPOVERID} useDom={useDom} />
}