{"id":25961747,"url":"https://github.com/eldh/statext","last_synced_at":"2025-06-17T17:36:54.877Z","repository":{"id":149717712,"uuid":"110454851","full_name":"eldh/statext","owner":"eldh","description":"Tiny global state management for React. Made for suspense \u0026 async rendering.","archived":false,"fork":false,"pushed_at":"2018-08-15T09:05:56.000Z","size":1052,"stargazers_count":49,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-07T10:46:13.800Z","etag":null,"topics":["blazing","react","state-management","suspense","tiny"],"latest_commit_sha":null,"homepage":"","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/eldh.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}},"created_at":"2017-11-12T17:48:16.000Z","updated_at":"2019-09-30T11:16:13.000Z","dependencies_parsed_at":"2023-04-25T15:12:44.075Z","dependency_job_id":null,"html_url":"https://github.com/eldh/statext","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/eldh/statext","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eldh%2Fstatext","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eldh%2Fstatext/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eldh%2Fstatext/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eldh%2Fstatext/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eldh","download_url":"https://codeload.github.com/eldh/statext/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eldh%2Fstatext/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260409269,"owners_count":23004646,"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":["blazing","react","state-management","suspense","tiny"],"created_at":"2025-03-04T19:49:26.813Z","updated_at":"2025-06-17T17:36:49.855Z","avatar_url":"https://github.com/eldh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/statext.svg)](https://badge.fury.io/js/statext) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)\n[![Blazing Fast](https://img.shields.io/badge/speed-blazing%20%F0%9F%94%A5-brightgreen.svg)](https://twitter.com/acdlite/status/974390255393505280)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n# Statext\n\nA tiny global state management solution for React. Made for suspense \u0026 async rendering.\n\n## Why?\nReact has a great mechanism for state management with its component state and props. In some cases you want to share pieces of information across different parts of the app, and then using just normal state and props becomes cumbersome. This is commonly solved by using state libraries like redux or mobx. \n\nHowever, these frameworks work outside the React component model and can feel heavy for simpler tasks. It's also unclear how they will work together with React's upcoming Suspense feature and async rendering.\n\nStatext tries to provide a state management solution that feels lightweight and doesn't stray too far from the React way of doing things.\n\n# How?\nStatext is really just a thin layer on top of React's context feature. This also means it's tiny, and blazing. \n\nStatext is built to work out of the box with React's upcoming [Suspense](https://medium.com/@baphemot/understandingRreact-suspense-1c73b4b0b1e6) feature. Look at the [examples](https://github.com/eldh/statext/tree/master/packages/examples) to see how that works.\n\n## API\nWrap your component with the `withSharedState` higher-order component. Then use `setState` in your component just as you normally would in React. \n\n## Examples\nThere are a few runnable examples under `/packages/examples`, including a TodoMVC and an example using React Suspense. There are also a few examples using `statext-redux`, which allows you to use Statext together with redux action creators and reducers.\n\n![Counter example](./example.gif)\n\nThis minimal example should look pretty familiar if you have worked with React before. Statext is, in essence, *just React components*.\n\nThe only difference from a normal React component is that `this.state` will be shared between all instances of `CountState`.\n\n```js\n// CountState.js\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { withSharedState } from 'statext'\n\nclass CountState extends React.Component {\n  static propTypes = {\n    render: PropTypes.func.isRequired,\n  }\n  state = {\n    count: 0,\n  }\n\n  increaseCount = () =\u003e {\n    this.setState(s =\u003e ({\n      count: s.count + 1,\n    }))\n  }\n\n  render() {\n    return this.props.render(this.state, { increaseCount: this.increaseCount })\n  }\n}\n\nexport default withSharedState(CountState)\n```\n\nYou use `CountState` in your application just like you would use any other component. It will render all instances with the same `count` value. Your application needs to be wrapped in a `Provider`.\n\n```js\n// App.js\n\nimport React from 'react'\nimport { Provider } from 'statext'\nimport CountState from './components/CountState'\n\nexport default class App extends React.Component {\n  render() {\n    return (\n      \u003cProvider\u003e\n        \u003cdiv\u003e\n          \u003cCountState render={({ count }) =\u003e `The count is ${count}`} /\u003e\n          \u003cCountState\n            render={({ count }, { increaseCount }) =\u003e (\n              \u003cbutton onClick={increaseCount}\u003e{'Click me ' + count}\u003c/button\u003e\n            )}\n          /\u003e\n        \u003c/div\u003e\n      \u003c/Provider\u003e\n    )\n  }\n}\n```\n\n## Thinking in statext\nA few things worth thinking about when using Statext:\n\n- **Use Statext as little as possible.** Most of the time you will only use the state in one place, so you can just use normal React component state. Only use Statext when you need to share state. Making that change is easy.\n- **Separate state and rendering.** If your stateful components only take care of keeping state, not rendering, sharing that state (with Statext) will be a one-line change. Use [render props](https://reactjs.org/docs/render-props.html)!\n- **Build on top of Statext.** You can compose state and functionality the same way you normally would in React – using components and functions. Find the abstractions that work for you.\n\n## Getting started\nIf you want to use Statext in your app, run `yarn install statext` or `npm i statext`.\n\nTo start using this this repo, clone it and run `yarn \u0026\u0026 lerna bootstrap` in the root of the repo. Then run `cd packages/examples \u0026\u0026 yarn start` to start the examples. \n\n## Status\nStatext is in its early phases. I don't recommend using it in production yet, but please try it out and report any issues. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feldh%2Fstatext","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feldh%2Fstatext","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feldh%2Fstatext/lists"}