About
This is not yet another minimalistic React implementation, the main use case is to create actual dom with a single function and JSX directly, but there're opt-in component lifecycle hooks.
Features
- Insanely small: 2kB minified
- One API: JSX is transformed to vNode, use
mount(vNode)
to get actual DOM. - SVG support
- Protection from XSS injections
- Automatically joining classNames, styles
Install
yarn add dom-dom
Usage
With a transpiler like babel+babel-plugin-transform-react-jsx
or typescript
or buble
:
/* @jsx h */ // With only first argconst button = // button.outerHTML:// => '<button>click me</button>' // With second arg// replacce `#root` with created element
Note that while using CDN version you can access d2.h
d2.mount
instead.
className
className
can be string
Array
or Object
:
<div className="foo"></div><div className='foo' 'bar'></div><div className=foo: false `bar-`: true></div>
You can also directly use class
instead of react-specific className
as you please:
<div class="foo"></div>
style
style
supports string
and Object
:
<div style="color: red"></div>// both kebab-case and camelCase are supported here// default unit is `px`<div style= fontSize: 14 'background-color': 'red' ></div>
innerHTML
<div dangerouslySetInnerHTML=__html: '<strong>hey</strong>'></div>
Events
React-like events are supports:
<button onClick=handleClick></button>
WARNING: If you only want a function to transform vNode to actual dom, please stop reading!!! Above features would be enough for your use case. Following features may not be what you want :D To use full build you should
import { xxx } from 'dom-dom'
instead.
Create your own React with dom-dom
// @jsx h { if typeof state === 'function' state = for const key in state thisstatekey = statekey this } { this$root = return this$root } { } state = count: 0 { this } { console } { return <div> <button onClick=thishandleClick> clicked: thisstatecount times </button> <button onClick=thisdestroy>destroy</button> </div> } const counter = counter
You can mount
unmount
a object or class instance which has a render
method that returns vNode
.
const A = { return <div>a</div> } const B = class { return <div>A</div> }
Object and class instance with render function can also be one of your JSX children.
This is designed for using lifecycle hooks, currently we have componentDidMount
componentWillMount
and componentWillUnmount
.
const App = { console } { console } { return <div>hi</div> } const root = //=> hi//=> bye
Prior Art
This project is heavily inspired by preact and dom-chef.
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Badges
Author
dom-dom © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).
egoistian.com · GitHub @egoist · Twitter @rem_rin_rin