{"id":21076565,"url":"https://github.com/monojack/immerx-react","last_synced_at":"2025-05-16T07:31:33.810Z","repository":{"id":42846352,"uuid":"262354229","full_name":"monojack/immerx-react","owner":"monojack","description":"React bindings for immerx","archived":false,"fork":false,"pushed_at":"2023-01-06T05:24:15.000Z","size":808,"stargazers_count":5,"open_issues_count":9,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-04T23:33:57.517Z","etag":null,"topics":["fractal","immer","immerx","observable","react","state"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/monojack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-08T15:05:54.000Z","updated_at":"2023-03-07T13:30:53.000Z","dependencies_parsed_at":"2023-02-05T10:16:10.603Z","dependency_job_id":null,"html_url":"https://github.com/monojack/immerx-react","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monojack%2Fimmerx-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monojack%2Fimmerx-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monojack%2Fimmerx-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monojack%2Fimmerx-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/monojack","download_url":"https://codeload.github.com/monojack/immerx-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253347069,"owners_count":21894281,"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":["fractal","immer","immerx","observable","react","state"],"created_at":"2024-11-19T19:29:09.164Z","updated_at":"2025-05-16T07:31:33.474Z","avatar_url":"https://github.com/monojack.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"images/immerx-react-logo.svg\" height=\"70px\"/\u003e\n\n**React** bindings for [ImmerX](https://github.com/monojack/immerx)\n\n\u003cbr/\u003e\n\n### `Basic usage`\n\nThe following example assumes that you are already familiar with **ImmerX**\n\n**`index.js`**\n\n```js\nimport React from 'react'\nimport { render } from 'react-dom'\nimport { create } from '@immerx/react'\n\nimport App from './App'\n\nimport './styles.css'\n\ncreate({\n  counter: { count: 0 },\n  times: 0,\n})\n\nconst rootElement = document.getElementById('root')\nrender(\u003cApp /\u003e, rootElement)\n```\n\n**`App.js`**\n\n```js\nimport React from 'react'\nimport { useImmerx } from '@immerx/react'\n\nimport Counter from './Counter'\n\nexport default function App() {\n  const [state] = useImmerx()\n\n  return (\n    \u003c\u003e\n      \u003cCounter /\u003e\n      \u003cp\u003eYou clicked: {state.times} times \u003c/p\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n**`Counter.js`**\n\n```js\nimport React from 'react'\nimport { useImmerx } from '@immerx/react'\n\nconst lens = {\n  get: state =\u003e state.counter,\n  set: (stateDraft, counter) =\u003e {\n    stateDraft.counter = counter\n    stateDraft.times += 1\n  },\n}\n\nexport default function Counter() {\n  const [state, update] = useImmerx(lens)\n\n  const increment = () =\u003e update(draft =\u003e void (draft.count += 1))\n  const decrement = () =\u003e update(draft =\u003e void (draft.count -= 1))\n\n  return (\n    \u003c\u003e\n      \u003cp\u003ecount: {state.count}\u003c/p\u003e\n      \u003cbutton onClick={decrement}\u003e - \u003c/button\u003e\n      \u003cbutton onClick={increment}\u003e + \u003c/button\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n[![Edit immerx-react-counter](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/immerx-react-counter-ie5ce?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n**NOTE:** Always memoize your lenses or define them outside the function if they're not derived from props, because the `state$` observable synchronously emits the current state value to incoming subscribers.\n\nOtherwise, the isolated `state` will emit an update\n**-\u003e** the `lens` is re-created\n**-\u003e** a new isolated `state` is created with the new `lens` and it emits another update\n**-\u003e** the `lens` is re-created\n...\n:boom: :fire: :fire:\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonojack%2Fimmerx-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmonojack%2Fimmerx-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonojack%2Fimmerx-react/lists"}