https://github.com/alexrqs/jsx-render
Lightweight util to render JSX without react
https://github.com/alexrqs/jsx-render
javascript jsx jsx-syntax redux without-react
Last synced: about 1 month ago
JSON representation
Lightweight util to render JSX without react
- Host: GitHub
- URL: https://github.com/alexrqs/jsx-render
- Owner: alexrqs
- License: mit
- Created: 2018-03-06T21:53:15.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T05:43:58.000Z (over 3 years ago)
- Last Synced: 2025-10-24T10:19:11.503Z (8 months ago)
- Topics: javascript, jsx, jsx-syntax, redux, without-react
- Language: JavaScript
- Homepage:
- Size: 1.93 MB
- Stars: 41
- Watchers: 2
- Forks: 2
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## JSX-render
[](https://travis-ci.org/alecsgone/jsx-render)
Small file to render jsx as a stateless component from react but without the heavy kb use of it.
## Contents
- [Quick Start](#quick-start)
- [How To Install](#how-to-install)
- [Features](#features)
- [How To test](recipes/testing.md)
- [Recipes](#recipes)
### Quick Start
(no build system, just plain html)
```html
Babel.registerPreset('jsx-render', {
presets: [[Babel.availablePresets['es2015']]],
plugins: [
Babel.availablePlugins['syntax-jsx'],
[
Babel.availablePlugins['transform-react-jsx'],
{
pragma: 'jsx.dom',
pragmaFrag: 'jsx.Fragment',
},
],
],
})
const foo = () => <p>Hello world</p>
document.body.appendChild(foo())
```
### 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.
```sh
$ 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"
```json
// .babelrc
{
"presets": ["babel-preset-primavera", ["@babel/preset-react", { "pragma": "dom" }]]
}
```
Now you can create components e.g.
```jsx
import dom from 'jsx-render'
const DummyComponent = props =>
{props.children}
export default DummyComponent
```
or Fragments
```jsx
import dom, { Fragment } from 'jsx-render'
import DummyComponent from './DummyComponent'
const Modal = props => (
Include {props.title}
Body
Copyright
)
```
### Features
- **new** Class suport with default target: the `render()` method
- Render Basic Single Components `
`
- Conditional Component `{condition ? : }`
- Component with Data Attributes ``
- Component with Attributes `
`
- Nested Component ul>li>a
- Siblings Components ul>li\*3
- Components with classname p.chan
- Map components & numbers `array.map(item => {item})`
- [Fragments](#fragments)
- [Portals](#portals)
- SVG
- Component Props ``
- Component Children `children`
- Component render xlinkHref for SVG sprites
- [dangerouslySetInnerHTML](#dangerouslysetinnerhtml)
- Components withState `Redux` not included
### Fragments
```jsx
import dom, { Fragments } from 'jsx-render'
// Return siblings without direct parent component
const Foo = () => (
)
const ul = document.createElement('ul')
ul.appendChild()
```
### Portals
```jsx
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 (
uno
)
}
```
### dangerouslySetInnerHTML
```jsx
function render() {
return
StrangerDanger' }} />
}
```
### Recipes
- [Redux](recipes/redux.md)
- [ClassComponents](recipes/classComponents.md)
- [Events](recipes/events.md)
### Testing
[Testing](recipes/testing.md)