## 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
- [x] Insanely small: 2kB minified
- [x] One API: JSX is transformed to vNode, use `mount(vNode)` to get actual DOM.
- [x] SVG support
- [x] Protection from XSS injections
- [x] Automatically joining classNames, styles
## Install
```bash
yarn add dom-dom
```
CDN: [UNPKG](https://unpkg.com/dom-dom/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/dom-dom/dist/)
## Usage
With a transpiler like `babel+babel-plugin-transform-react-jsx` or `typescript` or `buble`:
```js
/* @jsx h */
import { h, mount } from 'dom-dom/tiny'
// With only first arg
const button = mount()
// button.outerHTML:
// => ''
// With second arg
// replacce `#root` with created element
mount(
,
document.getElementById('root')
)
```
Note that while using CDN version you can access `d2.h` `d2.mount` instead.
### className
`className` can be `string` `Array` or `Object`:
```js
```
You can also directly use `class` instead of react-specific `className` as you please:
```js
```
### style
`style` supports `string` and `Object`:
```js
// both kebab-case and camelCase are supported here
// default unit is `px`
```
### innerHTML
```js
hey'}}>
```
### Events
React-like events are supports:
```js
```
---
> **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
```js
// @jsx h
import { h, mount, unmount } from 'dom-dom'
class Component {
setState(state) {
if (typeof state === 'function') {
state = state(this.state)
}
for (const key in state) {
this.state[key] = state[key]
}
this.mount()
}
mount(root = this.$root) {
this.$root = mount(this, root)
return this.$root
}
destroy = () => {
unmount(this, this.$root)
}
}
class Counter extends Component {
state = { count: 0 }
handleClick = () => {
this.setState(prevState => ({
count: prevState.count + 1
}))
}
componentDidMount() {
console.log('app mounted!', this)
}
render() {
return (
)
}
}
const counter = new Counter()
counter.mount(document.getElementById('root'))
```
[](https://codesandbox.io/s/VyGn0DP5)
You can `mount` `unmount` a object or class instance which has a `render` method that returns `vNode`.
```js
import { h, mount } from 'dom-dom'
const A = {
render() {
return
a
}
}
const B = class {
render() {
return
{A}
}
}
mount(new B, document.getElementById('root'))
```
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`.
```js
const App = {
componentDidMount() {
console.log('hi')
},
componentWillUnmount() {
console.log('bye')
},
render() {
return
