{"id":31162105,"url":"https://github.com/zephraph/mustate","last_synced_at":"2025-09-19T04:51:56.029Z","repository":{"id":303010344,"uuid":"1013522301","full_name":"zephraph/mustate","owner":"zephraph","description":"Minimal immutable state management for React","archived":false,"fork":false,"pushed_at":"2025-07-05T05:51:08.000Z","size":71,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-05T06:33:45.999Z","etag":null,"topics":[],"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/zephraph.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-04T03:41:26.000Z","updated_at":"2025-07-05T05:51:11.000Z","dependencies_parsed_at":"2025-07-05T06:33:49.067Z","dependency_job_id":"72a8c8f9-1706-4506-b2ad-731fff1cbcec","html_url":"https://github.com/zephraph/mustate","commit_stats":null,"previous_names":["zephraph/mustate"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zephraph/mustate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zephraph%2Fmustate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zephraph%2Fmustate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zephraph%2Fmustate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zephraph%2Fmustate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zephraph","download_url":"https://codeload.github.com/zephraph/mustate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zephraph%2Fmustate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275883280,"owners_count":25545490,"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","status":"online","status_checked_at":"2025-09-19T02:00:09.700Z","response_time":108,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-09-19T04:51:54.116Z","updated_at":"2025-09-19T04:51:56.014Z","avatar_url":"https://github.com/zephraph.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mustate\n\n\u003e Minimal immutable state management for React\n\n## Quick Start\n\n```bash\nnpm install @just-be/mustate\n```\n\n**Table of Contents**\n\n- [Example](#example)\n- [API](#api)\n  - [`createStore\u003cState\u003e(initialState: State): Store\u003cState\u003e`](#createstorestateintialstate-state-storestate)\n  - [`createStoreHook\u003cState\u003e(store: Store\u003cState\u003e): useStore`](#createstorehookstatestore-storestate-usestore)\n  - [`createStoreWithHook\u003cState\u003e(initialState: State): [Store\u003cState\u003e, useStore]`](#createstorewithhookstateintialstate-state-storestate-usestore)\n    - [`store`](#store)\n    - [`useStore\u003cValue\u003e(selector: (state: State) =\u003e Value): Value`](#usestorevalueselector-state-state--value-value)\n\n## Example\n\n```jsx\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { createStoreWithHook } from '@just-be/mustate';\n\n// Create a lil' store with some state\nlet [store, useStore] = createStoreWithHook({\n  count: 0,\n});\n\n// The app doesn't need a provider\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003cLabel /\u003e\n      \u003cButtons /\u003e\n    \u003c/div\u003e\n  );\n}\n\n// You can mutate the store from anywhere you want to,\n// even outside of React code. Mutate is based on mutative.\nfunction increment() {\n  store.mutate(state =\u003e {\n    state.count++;\n  });\n}\n\n// Or you can update it like React.useState's update\nfunction decrement() {\n  store.set(prevState =\u003e ({\n    ...prevState,\n    count: prevState.count - 1\n  }));\n}\n\n// You don't need to pass the store down as a prop either\nfunction Buttons() {\n  return (\n    \u003cReact.Fragment\u003e\n      \u003cbutton onClick={decrement}\u003e-\u003c/button\u003e\n      \u003cbutton onClick={increment}\u003e+\u003c/button\u003e\n    \u003c/React.Fragment\u003e\n  );\n}\n\n// Lastly, you can subscribe to \"slices\" of state by passing a selector to\n// useStore. The component will only be re-rendered when that portion of state\n// changes.\nfunction Label() {\n  const count = useStore(state =\u003e state.count);\n  return \u003cp\u003eThe count is {count}\u003c/p\u003e;\n}\n\nrender(\u003cApp /\u003e, window.root);\n```\n\n## API\n\n### `createStore\u003cState\u003e(initialState: State): Store\u003cState\u003e`\n\nCreate a mustate `store` given some initial state. Returns a store instance that can be used anywhere in your application.\n\n```jsx\nimport { createStore } from '@just-be/mustate';\n\nconst store = createStore({ count: 0, name: 'Alice' });\n```\n\n### `createStoreHook\u003cState\u003e(store: Store\u003cState\u003e): useStore`\n\nCreate a React hook for a specific store. This allows you to subscribe to state changes in React components.\n\n```jsx\nimport { createStore, createStoreHook } from '@just-be/mustate';\n\nconst store = createStore({ count: 0 });\nconst useStore = createStoreHook(store);\n\n// In a React component\nfunction Counter() {\n  const count = useStore(state =\u003e state.count);\n  return \u003cdiv\u003e{count}\u003c/div\u003e;\n}\n```\n\n### `createStoreWithHook\u003cState\u003e(initialState: State): [Store\u003cState\u003e, useStore]`\n\nConvenience function that combines `createStore` and `createStoreHook`. This is equivalent to calling both functions separately.\n\n```jsx\nimport { createStoreWithHook } from '@just-be/mustate';\n\nconst [store, useStore] = createStoreWithHook({ count: 0, name: 'Alice' });\n```\n\nThe `store` has the following API you can use in or out of React:\n\n#### `store`\n\n| **Method**                                            | **Description**                                                                                                                                 |\n| ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |\n| `get()`                                               | Get the current state. Do not use this inside of React, you should instead use [`useStore`](#usestorevalueselector-state-state--value-value)                  |\n| `set(nextState: S \\| (prevState: S) =\u003e V): void;`     | Set state. This can either take a new value or and updater function (just like React.useState's updater)                                        |\n| `on(listener: Function): () =\u003e void;`                 | Subscribe to store. Pass in a callback function that will be executed on updates. `on()` returns the unsubscribe function for your convenience. |\n| `off(listener: Function): void;`                      | Unsubscribe a given listener function                                                                                                           |\n| `reset(): void`                                       | Set state back to the `initialState` used when creating the store                                                                               |\n| `mutate(updater: (draft: Draft) =\u003e void \\| S): void;` | Mutative-style updater function.                                                                                                                   |\n\n#### `useStore\u003cValue\u003e(selector: (state: State) =\u003e Value): Value`\n\nReact hook to subscribe to mustate state.\n\n```jsx\nconst selector = state =\u003e state.count;\n\nfunction Label() {\n  const count = useStore(selector);\n  return \u003cp\u003eThe count is {count}\u003c/p\u003e;\n}\n```\n\nYou can use props with mustate selector.\n\n```jsx\nfunction User({ id }) {\n  const user = useStore(state =\u003e state.users[id]);\n  return \u003cp\u003eThe username is {user.name}\u003c/p\u003e;\n}\n```\n\n## Inspiration\n\nThis project was inspired by Jared Palmer's [Mutik](https://github.com/jaredpalmer/mutik).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzephraph%2Fmustate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzephraph%2Fmustate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzephraph%2Fmustate/lists"}