{"id":13751810,"url":"https://github.com/IniZio/iniz","last_synced_at":"2025-05-09T18:32:28.097Z","repository":{"id":46070682,"uuid":"142742876","full_name":"IniZio/iniz","owner":"IniZio","description":":shipit: A reactive state library for ReactJS","archived":false,"fork":false,"pushed_at":"2023-03-21T02:56:39.000Z","size":1823,"stargazers_count":90,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-07-29T05:23:26.745Z","etag":null,"topics":["preactjs","reactjs","state-management"],"latest_commit_sha":null,"homepage":"https://iniz.netlify.app/","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/IniZio.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-29T08:14:43.000Z","updated_at":"2024-06-11T10:17:04.000Z","dependencies_parsed_at":"2024-06-21T15:37:16.715Z","dependency_job_id":"5dcb9660-30a8-4f58-b449-0b705c36ec5b","html_url":"https://github.com/IniZio/iniz","commit_stats":{"total_commits":160,"total_committers":3,"mean_commits":"53.333333333333336","dds":0.3125,"last_synced_commit":"f9494b7819fe0d208d09b7c009774f8556d537aa"},"previous_names":[],"tags_count":92,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IniZio%2Finiz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IniZio%2Finiz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IniZio%2Finiz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IniZio%2Finiz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IniZio","download_url":"https://codeload.github.com/IniZio/iniz/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":213786219,"owners_count":15638379,"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":["preactjs","reactjs","state-management"],"created_at":"2024-08-03T09:00:55.170Z","updated_at":"2024-08-03T09:02:46.090Z","avatar_url":"https://github.com/IniZio.png","language":"TypeScript","funding_links":[],"categories":["*.js"],"sub_categories":["Browser"],"readme":"# Iniz\n\nIniz is a reactive state library for ReactJS. Try it out on our [website](https://iniz.netlify.app)!\n\n`npm i @iniz/core`\n\n[![Build Status](https://img.shields.io/github/actions/workflow/status/inizio/iniz/ci.yaml?branch=main\u0026style=flat\u0026colorA=28282B\u0026colorB=28282B)](https://github.com/inizio/iniz/actions?query=workflow%3ACI)\n[![Test Coverage](https://img.shields.io/codecov/c/github/inizio/iniz/main?token=qiX91NsrLE\u0026label=coverage\u0026style=flat\u0026colorA=28282B\u0026colorB=28282B)](https://codecov.io/gh/IniZio/iniz)\n[![Build Size](https://img.shields.io/bundlephobia/minzip/@iniz/core?label=bundle%20size\u0026style=flat\u0026colorA=28282B\u0026colorB=28282B)](https://bundlephobia.com/package/@iniz/core)\n[![Version](https://img.shields.io/npm/v/@iniz/core?style=flat\u0026colorA=28282B\u0026colorB=28282B)](https://www.npmjs.com/package/@iniz/core)\n[![Downloads](https://img.shields.io/npm/dt/@iniz/core.svg?style=flat\u0026colorA=28282B\u0026colorB=28282B)](https://www.npmjs.com/package/@iniz/core)\n\n- [Guide](#guide)\n  - [Getting started](#getting-started)\n    - [Create an atom](#create-an-atom)\n    - [Mutate the atom value](#mutate-the-atom-value)\n    - [Subscribe to atom](#subscribe-to-atom)\n  - [React ⚛](#react-)\n- [Credits](#credits)\n\n## Guide\n\n### Getting started\n\n#### Create an atom / store\n\n```ts\nimport { atom, store } from \"@iniz/core\";\n\nconst timer$ = atom(new Date());\n\nconst nested$ = store({\n  obj: {\n    array: [{ count: 3 }],\n    message: \"Hello World\",\n  },\n  async reset() {\n    this.array = [];\n    this.message = \"Good bye\";\n  },\n});\n```\n\n#### Mutate the atom value\n\nCall the atom to read/write it.\n\n```ts\n// Initial value\ntimer$(); // Returns latest value e.g. `2019-08-31T00:00:00.000Z`\n\n// Mutate the atom / state\nsetInterval(() =\u003e {\n  nested$.obj.array[0].count++;\n  timer$(new Date());\n}, 1000);\n\n// Later on...\ntimer$(); // Returns latest value e.g. `2022-08-31T00:00:00.000Z`\nnested$.obj.array[0].count;\n\nnested$.reset();\n```\n\n#### Subscribe to atom\n\nUse `effect()` to subscribe to value change.\n\n```ts\nconst dispose = effect(() =\u003e {\n  console.log(\"Updated timer: \", timer$());\n});\n\n// Execute `dispose` to stop effect\ndispose();\n```\n\nUse `computed()` to get calculated value from multiple atoms.\n\n```ts\nconst timerAndCounter$ = computed(\n  () =\u003e `Computed: '${nestedCounter$().obj.array[0]}' '${timer$()}'`\n);\n\ntimerAndCounter$(); // Returns \"Computed: 2022-08-31T00:00:00.000Z 4\"\n```\n\n### React ⚛\n\n`npm i @iniz/react`\n\n\u003e `@iniz/react` already re-exports `@iniz/core`, so don't need to install `@iniz/core` yourself\n\nSimply use `atom()` values in components, they will re-render correctly thanks to [useSyncExternalStore](https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore)\n\n```tsx\nimport { useAtom, useComputed } from \"@iniz/react\";\n\n// The component won't re-render when `nestedCounter$().obj.array[0].count` is updated\nfunction MessageInput() {\n  // Equivalient to `atom()`\n  const counter = useAtom(10);\n\n  // Equivalent to `computed()`\n  const computedCounter = useComputed(\n    () =\u003e `Computed: ${nestedCounter$$().obj.message}`\n  );\n\n  // Equivalent to `effect()`\n  // NOTE: You can also use `useEffect` with atoms actually\n  useSideEffect(() =\u003e {\n    console.log(\"[Latest message] \", computedCounter());\n  });\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={() =\u003e counter(counter() + 1)}\u003e{counter()}++\u003c/button\u003e\n      \u003cinput\n        value={nestedCounter$().obj.message}\n        onChange={(evt) =\u003e (nestedCounter$().obj.message = evt.target())}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Credits\n\n- [pmndrs/valtio](https://github.com/pmndrs/valtio): The original snapshot idea\n- [tomasklaen/statin](https://github.com/tomasklaen/statin): Use function call to get/set atom value\n- [RisingStack/react-easy-state](https://github.com/RisingStack/react-easy-state): Original implementation for `useAtom`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIniZio%2Finiz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FIniZio%2Finiz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIniZio%2Finiz/lists"}