Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cyclejs/react-dom
Cycle.js driver that uses React DOM to render the view
https://github.com/cyclejs/react-dom
cyclejs hyperscript hyperscript-helpers react
Last synced: 2 months ago
JSON representation
Cycle.js driver that uses React DOM to render the view
- Host: GitHub
- URL: https://github.com/cyclejs/react-dom
- Owner: cyclejs
- License: mit
- Created: 2018-07-18T11:28:20.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-03-04T14:17:14.000Z (almost 5 years ago)
- Last Synced: 2024-10-30T00:55:13.351Z (2 months ago)
- Topics: cyclejs, hyperscript, hyperscript-helpers, react
- Language: TypeScript
- Size: 29.3 KB
- Stars: 41
- Watchers: 4
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Cycle ReactDOM
> Cycle.js driver that uses React DOM to render the view
- Provides a driver factory `makeDOMDriver`
- Contains hyperscript helper functions, like in Cycle DOM
```
npm install @cycle/react-dom
```
## Example
```js
import xs from 'xstream';
import {run} from '@cycle/run';
import {makeDOMDriver, div, h1, button} from '@cycle/react-dom';
function main(sources) {
const inc = Symbol();
const inc$ = sources.react.select(inc).events('click');
const count$ = inc$.fold(count => count + 1, 0);
const vdom$ = count$.map(i =>
div([
h1(`Counter: ${i}`),
button(inc, 'Increment'),
]),
);
return {
react: vdom$,
};
}
run(main, {
react: makeDOMDriver(document.getElementById('app')),
});
```
## API
### `makeDOMDriver(container)`
Returns a driver that uses ReactDOM to render your Cycle.js app into the given `container` element.
### Hyperscript helpers
Import hyperscript helpers such as `div`, `span`, `p`, `button`, `input`, etc to create React elements to represent the respective HTML elements: `
`, ``, ``, ``, ``, etc.
The basic usage is `div(props, children)`, but some variations and shortcuts are allowed:
- `div()` becomes `h('div')`
- `div('#foo')` becomes `h('div', {id: 'foo'})`
- `div('.red')` becomes `h('div', {className: 'red'})`
- `div('.red.circle')` becomes `h('div', {className: 'red circle'})`
- `div('#foo.red')` becomes `h('div', {id: 'foo', className: 'red'})`
- `div(propsObject)` becomes `h('div', propsObject)`
- `div('text content')` becomes `h('div', 'text content')`
- `div([child1, child2])` becomes `h('div', [child1, child2])`
- `div(props, 'text content')` becomes `h('div', props, 'text content')`
- `div(props, [child1, child2])` becomes `h('div', props, [child1, child2])`
- `div('#foo.bar', props, [child1, child2])`
- etc
There are also shortcuts for (MVI) intent selectors:
- `div(someSymbol)` becomes `h('div', {sel: someSymbol})`
- `div('inc#foo.bar')` becomes `h('div', {sel: 'inc', id: 'foo', className: 'bar'})`
- `div('inc', props)` becomes `h('div', {sel: 'inc', ...props})`
- `div('inc', 'text content')` becomes `h('div', {sel: 'inc'}, 'text content')`
- `div('inc', [child1])` becomes `h('div', {sel: 'inc'}, [child1])`
- `div('inc', props, [child1])` becomes `h('div', {sel: 'inc'}, [child1])`
- etc
## JSX
### Babel
Add the following to your webpack config:
```js
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
options: {
plugins: [
['transform-react-jsx', { pragma: 'jsxFactory.createElement' }],
]
}
}
]
},
```
If you used `create-cycle-app` you may have to eject to modify the config.
### Automatically providing jsxFactory
You can avoid having to import `jsxFactory` in every jsx file by allowing webpack to provide it:
```js
plugins: [
new webpack.ProvidePlugin({
jsxFactory: ['react-dom', 'jsxFactory']
})
],
```
### Typescript
Add the following to your `tsconfig.json`:
```js
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "jsxFactory.createElement"
}
}
```
If webpack is providing `jsxFactory` you will need to add typings to `custom-typings.d.ts`:
```js
declare var jsxFactory: any;
```
## Usage
```js
import { jsxFactory } from '@cycle/react-dom';
function view(state$: Stream): Stream {
return state$.map(({ count }) => (
Counter: {count}
Add
Subtract
));
}
```
## Notes
Please ensure you are depending on compatible versions of `@cycle/react` and `@cycle/react-dom`. They should both be at least version `2.1.x`.
```
yarn list @cycle/react
```
should return a single result.
## License
MIT, Andre 'Staltz' Medeiros 2018