{"id":18541288,"url":"https://github.com/cyclejs/react-dom","last_synced_at":"2026-03-12T19:14:33.573Z","repository":{"id":57105161,"uuid":"141425633","full_name":"cyclejs/react-dom","owner":"cyclejs","description":"Cycle.js driver that uses React DOM to render the view","archived":false,"fork":false,"pushed_at":"2020-03-04T14:17:14.000Z","size":30,"stargazers_count":41,"open_issues_count":1,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-11T18:27:05.223Z","etag":null,"topics":["cyclejs","hyperscript","hyperscript-helpers","react"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cyclejs.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-18T11:28:20.000Z","updated_at":"2023-04-11T02:54:49.000Z","dependencies_parsed_at":"2022-08-21T03:00:36.926Z","dependency_job_id":null,"html_url":"https://github.com/cyclejs/react-dom","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/cyclejs/react-dom","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyclejs%2Freact-dom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyclejs%2Freact-dom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyclejs%2Freact-dom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyclejs%2Freact-dom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cyclejs","download_url":"https://codeload.github.com/cyclejs/react-dom/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyclejs%2Freact-dom/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260766887,"owners_count":23059551,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cyclejs","hyperscript","hyperscript-helpers","react"],"created_at":"2024-11-06T20:04:35.850Z","updated_at":"2026-03-12T19:14:28.551Z","avatar_url":"https://github.com/cyclejs.png","language":"TypeScript","readme":"# Cycle ReactDOM\n\n\u003e Cycle.js driver that uses React DOM to render the view\n\n- Provides a driver factory `makeDOMDriver`\n- Contains hyperscript helper functions, like in Cycle DOM\n\n```\nnpm install @cycle/react-dom\n```\n\n## Example\n\n```js\nimport xs from 'xstream';\nimport {run} from '@cycle/run';\nimport {makeDOMDriver, div, h1, button} from '@cycle/react-dom';\n\nfunction main(sources) {\n  const inc = Symbol();\n  const inc$ = sources.react.select(inc).events('click');\n\n  const count$ = inc$.fold(count =\u003e count + 1, 0);\n\n  const vdom$ = count$.map(i =\u003e\n    div([\n      h1(`Counter: ${i}`),\n      button(inc, 'Increment'),\n    ]),\n  );\n\n  return {\n    react: vdom$,\n  };\n}\n\nrun(main, {\n  react: makeDOMDriver(document.getElementById('app')),\n});\n```\n\n## API\n\n### `makeDOMDriver(container)`\n\nReturns a driver that uses ReactDOM to render your Cycle.js app into the given `container` element.\n\n### Hyperscript helpers\n\nImport hyperscript helpers such as `div`, `span`, `p`, `button`, `input`, etc to create React elements to represent the respective HTML elements: `\u003cdiv\u003e`, `\u003cspan\u003e`, `\u003cp\u003e`, `\u003cbutton\u003e`, `\u003cinput\u003e`, etc.\n\nThe basic usage is `div(props, children)`, but some variations and shortcuts are allowed:\n\n- `div()` becomes `h('div')`\n- `div('#foo')` becomes `h('div', {id: 'foo'})`\n- `div('.red')` becomes `h('div', {className: 'red'})`\n- `div('.red.circle')` becomes `h('div', {className: 'red circle'})`\n- `div('#foo.red')` becomes `h('div', {id: 'foo', className: 'red'})`\n- `div(propsObject)` becomes `h('div', propsObject)`\n- `div('text content')` becomes `h('div', 'text content')`\n- `div([child1, child2])` becomes `h('div', [child1, child2])`\n- `div(props, 'text content')` becomes `h('div', props, 'text content')`\n- `div(props, [child1, child2])` becomes `h('div', props, [child1, child2])`\n- `div('#foo.bar', props, [child1, child2])`\n- etc\n\nThere are also shortcuts for (MVI) intent selectors:\n\n- `div(someSymbol)` becomes `h('div', {sel: someSymbol})`\n- `div('inc#foo.bar')` becomes `h('div', {sel: 'inc', id: 'foo', className: 'bar'})`\n- `div('inc', props)` becomes `h('div', {sel: 'inc', ...props})`\n- `div('inc', 'text content')` becomes `h('div', {sel: 'inc'}, 'text content')`\n- `div('inc', [child1])` becomes `h('div', {sel: 'inc'}, [child1])`\n- `div('inc', props, [child1])` becomes `h('div', {sel: 'inc'}, [child1])`\n- etc\n\n## JSX\n\n### Babel\n\nAdd the following to your webpack config:\n\n```js\nmodule: {\n  rules: [\n    {\n      test: /\\.jsx?$/,\n      loader: 'babel-loader',\n      options: {\n        plugins: [\n          ['transform-react-jsx', { pragma: 'jsxFactory.createElement' }],\n        ]\n      }\n    }\n  ]\n},\n```\n\nIf you used `create-cycle-app` you may have to eject to modify the config.\n\n### Automatically providing jsxFactory\n\nYou can avoid having to import `jsxFactory` in every jsx file by allowing webpack to provide it:\n\n```js\nplugins: [\n  new webpack.ProvidePlugin({\n    jsxFactory: ['react-dom', 'jsxFactory']\n  })\n],\n```\n\n### Typescript\n\nAdd the following to your `tsconfig.json`:\n\n```js\n{\n  \"compilerOptions\": {\n    \"jsx\": \"react\",\n    \"jsxFactory\": \"jsxFactory.createElement\"\n  }\n}\n```\n\nIf webpack is providing `jsxFactory` you will need to add typings to `custom-typings.d.ts`:\n\n```js\ndeclare var jsxFactory: any;\n```\n\n\n## Usage\n\n```js\nimport { jsxFactory } from '@cycle/react-dom';\n\nfunction view(state$: Stream\u003cState\u003e): Stream\u003cReactElement\u003e {\n    return state$.map(({ count }) =\u003e (\n        \u003cdiv\u003e\n            \u003ch2\u003eCounter: {count}\u003c/h2\u003e\n            \u003cbutton sel=\"add\"\u003eAdd\u003c/button\u003e\n            \u003cbutton sel=\"subtract\"\u003eSubtract\u003c/button\u003e\n        \u003c/div\u003e\n    ));\n}\n```\n\n## Notes\n\nPlease ensure you are depending on compatible versions of `@cycle/react` and `@cycle/react-dom`. They should both be at least version `2.1.x`.\n\n```\nyarn list @cycle/react\n```\n\nshould return a single result.\n\n\n## License\n\nMIT, Andre 'Staltz' Medeiros 2018\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcyclejs%2Freact-dom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcyclejs%2Freact-dom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcyclejs%2Freact-dom/lists"}