JSX-render
Small file to render jsx as a stateless component from react but without the heavy kb use of it.
Contents
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 componentconst Foo = <Fragments> <li /> <li /> </Fragments>const ul = documentul
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 { const Portal = return <div> <Portal> <span>uno</span> </Portal> </div> }
dangerouslySetInnerHTML
{ return <div = />}
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-cli, 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
Now you can create components e.g.
import dom from 'jsx-render' const DummyComponent = <div>propschildren</div>
or Fragments
import dom Fragment from 'jsx-render'import DummyComponent from './DummyComponent' const Modal = <div> <header>Include propstitle</header> <Fragment> <div>Body</div> <DummyComponent>Copyright</DummyComponent> </Fragment> </div>