jr

jsx-render

Lightweight util to render JSX without react

Showing:

Popularity

Downloads/wk

225

GitHub Stars

15

Maintenance

Last Commit

2yrs ago

Contributors

9

Package

Dependencies

0

Size (min+gzip)

1.1KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

JSX-render

travis

Small file to render jsx as a stateless component from react but without the heavy kb use of it.

Contents

Quick Start

(no build system, just plain html)

<!-- index.html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/javascript" src="https://alecsgone.github.io/jsx-render/jsx.js"></script>
<script>
  Babel.registerPreset('jsx-render', {
    presets: [[Babel.availablePresets['es2015']]],
    plugins: [
      Babel.availablePlugins['syntax-jsx'],
      [
        Babel.availablePlugins['transform-react-jsx'],
        {
          pragma: 'jsx.dom',
          pragmaFrag: 'jsx.Fragment',
        },
      ],
    ],
  })
</script>

<script type="text/babel" data-presets="jsx-render">
  const foo = () => <p>Hello world</p>

  document.body.appendChild(foo())
</script>

How To Install

The required packages are @babel/plugin-syntax-jsx, @babel/plugin-transform-react-jsx and of course jsx-render, additionally you will need @babel/core, webpack or any other way to transpile the code that you prefer.

$ npm install jsx-render @babel/plugin-syntax-jsx @babel/plugin-transform-react-jsx

Getting started

Make sure you have the pragma fn defined and its name is "dom"

// .babelrc
{
  "presets": ["babel-preset-primavera", ["@babel/preset-react", { "pragma": "dom" }]]
}

Now you can create components e.g.

import dom from 'jsx-render'

const DummyComponent = props => <div>{props.children}</div>
export default DummyComponent

or Fragments

import dom, { Fragment } from 'jsx-render'
import DummyComponent from './DummyComponent'

const Modal = props => (
  <div>
    <header>Include {props.title}</header>
    <Fragment>
      <div>Body</div>
      <DummyComponent>Copyright</DummyComponent>
    </Fragment>
  </div>
)

Features

  • new Class suport with default target: the render() method
  • Render Basic Single Components <div />
  • Conditional Component {condition ? <foo/> : <bar/>}
  • Component with Data Attributes <div data-some="attr">
  • Component with Attributes <img src="foo.jpg">
  • Nested Component ul>li>a
  • Siblings Components ul>li*3
  • Components with classname p.chan
  • Map components & numbers array.map(item => <div>{item}</div>)
  • Fragments
  • Portals
  • SVG
  • Component Props <Custom foo="foo">
  • Component Children <Custom>children</Custom>
  • Component render xlinkHref for SVG sprites
  • dangerouslySetInnerHTML
  • Components withState Redux not included

Fragments

import dom, { Fragments } from 'jsx-render'

// Return siblings without direct parent component
const Foo = () => (
  <Fragments>
    <li />
    <li />
  </Fragments>
)
const ul = document.createElement('ul')
ul.appendChild(<Foo />)

Portals

import dom, { portalCreator } from 'jsx-render'

// can render the component on a diferent node than the parentNode
// useful for modals, and if the argument is not a node
// it will render as body direct son by default
function Component(node) {
  const Portal = portalCreator(node)

  return (
    <div>
      <Portal>
        <span>uno</span>
      </Portal>
    </div>
  )
}

dangerouslySetInnerHTML

function render() {
  return <div dangerouslySetInnerHTML={{ __html: '<span>StrangerDanger</span>' }} />
}

Recipes

Testing

Testing

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100