{"id":13481500,"url":"https://github.com/vesparny/statty","last_synced_at":"2025-04-04T11:12:48.368Z","repository":{"id":46912851,"uuid":"97232967","full_name":"vesparny/statty","owner":"vesparny","description":"A tiny and unobtrusive state management library for React and Preact apps","archived":false,"fork":false,"pushed_at":"2021-09-21T16:30:41.000Z","size":219,"stargazers_count":509,"open_issues_count":1,"forks_count":25,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-03-28T10:07:16.637Z","etag":null,"topics":["management","preact","react","state"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/vesparny.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2017-07-14T12:46:09.000Z","updated_at":"2025-03-13T03:20:48.000Z","dependencies_parsed_at":"2022-09-14T11:22:43.011Z","dependency_job_id":null,"html_url":"https://github.com/vesparny/statty","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vesparny%2Fstatty","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vesparny%2Fstatty/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vesparny%2Fstatty/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vesparny%2Fstatty/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vesparny","download_url":"https://codeload.github.com/vesparny/statty/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247166168,"owners_count":20894654,"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":["management","preact","react","state"],"created_at":"2024-07-31T17:00:52.350Z","updated_at":"2025-04-04T11:12:48.352Z","avatar_url":"https://github.com/vesparny.png","language":"JavaScript","readme":"# statty\n\n\u003e A tiny and unobtrusive state management library for React and Preact apps\n\n[![Travis](https://img.shields.io/travis/vesparny/statty.svg)](https://travis-ci.org/vesparny/statty)\n[![Code Coverage](https://img.shields.io/codecov/c/github/vesparny/statty.svg?style=flat-square)](https://codecov.io/github/vesparny/statty)\n[![David](https://img.shields.io/david/vesparny/statty.svg)](https://david-dm.org/vesparny/statty)\n[![npm](https://img.shields.io/npm/v/statty.svg)](https://www.npmjs.com/package/statty)\n[![npm](https://img.shields.io/npm/dm/statty.svg)](https://npm-stat.com/charts.html?package=statty\u0026from=2017-05-19)\n[![JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)\n[![MIT License](https://img.shields.io/npm/l/statty.svg?style=flat-square)](https://github.com/vesparny/statty/blob/master/LICENSE)\n\nThe current size of `statty/dist/statty.umd.min.js` is:\n\n[![gzip size](http://img.badgesize.io/https://unpkg.com/statty/dist/statty.umd.min.js?compression=gzip\u0026label=gzip%20size\u0026style=flat-square)](https://unpkg.com/statty/dist/)\n\n## The problem\n\nMost of the time, I see colleagues starting React projects setting up Redux + a bunch of middlewares and store enhancers by default, regardless of the project nature.\n\nDespite Redux being awesome, [it's not always needed](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367) and it may slow down the process of onboarding new developers, especially if they are new to the React ecosystem (I have often seen colleagues being stuck for hours trying to understand what was the proper way to submit a simple form).\n\nReact already comes with a built-in state management mechanism, `setState()`. Local component state is just fine in most of the cases.\n\nIn real world apps we often have app state, and sometimes it becomes annoying to pass it down the entire component tree, along with callbacks to update it, via props.\n\n## This solution\n\n`statty` is meant to manage app-wide state and can be thought of as a simplified version of Redux.\n\nIt [safely](https://medium.com/@mweststrate/how-to-safely-use-react-context-b7e343eff076) leverages context to expose application state to children, along with a function to update it when needed.\n\nThe update function acts like Redux dispatch, but instead of an action, it takes an `updater` function as a parameter that returns the new state.\n\nThis way it's easy to write testable updaters and to organize them as you prefer, without having to write boilerplate code.\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Examples](#examples)\n- [Inspiration](#inspiration)\n- [LICENSE](#license)\n\n## Installation\n\nThis project uses [node](http://nodejs.org) and [npm](https://npmjs.com). Check them out if you don't have them locally installed.\n\n```sh\n$ npm i statty\n```\n\nThen with a module bundler like [rollup](http://rollupjs.org/) or [webpack](https://webpack.js.org/), use as you would anything else:\n\n```javascript\n// using ES6 modules\nimport statty from 'statty'\n\n// using CommonJS modules\nvar statty = require('statty')\n```\n\nThe [UMD](https://github.com/umdjs/umd) build is also available on [unpkg](https://unpkg.com):\n\n```html\n\u003cscript src=\"https://unpkg.com/statty/dist/statty.umd.js\"\u003e\u003c/script\u003e\n```\n\nYou can find the library on `window.statty`.\n\n## Usage\n\n```jsx\n// https://codesandbox.io/s/rzpxx0w34\nimport React from 'react'\nimport { render } from 'react-dom'\nimport { Provider, State } from 'statty'\nimport inspect from 'statty/inspect'\n\n// selector is a function that returns a slice of the state\n// if not specified it defaults to f =\u003e f\nconst selector = state =\u003e ({ count: state.count })\n\n// updaters\n\n// updaters MUST be pure and return a complete new state,\n// like Redux reducers\nconst onDecrement = state =\u003e \n  Object.assign({}, state, { count: state.count - 1 })\n\nconst onIncrement = state =\u003e\n  Object.assign({}, state, { count: state.count + 1 })\n\n// Counter uses a \u003cState\u003e component to access the state\n// and the update function used to execute state mutations\nconst Counter = () =\u003e (\n  \u003cState\n    select={selector}\n    render={({ count }, update) =\u003e (\n      \u003cdiv\u003e\n        \u003cspan\u003eClicked: {count} times \u003c/span\u003e\n        \u003cbutton onClick={() =\u003e update(onIncrement)}\u003e+\u003c/button\u003e{' '}\n        \u003cbutton onClick={() =\u003e update(onDecrement)}\u003e-\u003c/button\u003e{' '}\n      \u003c/div\u003e\n    )}\n  /\u003e\n)\n\n// initial state\nconst initialState = {\n  count: 0\n}\n\n// The \u003cProvider\u003e component is supposed to be placed at the top\n// of your application. It accepts the initial state and an inspect function\n// useful to log state mutatations during development\n// (check your dev tools to see it in action)\nconst App = () =\u003e (\n  \u003cProvider state={initialState} inspect={inspect}\u003e\n    \u003cCounter /\u003e\n  \u003c/Provider\u003e\n)\n\nrender(\u003cApp /\u003e, document.getElementById('root'))\n\n\n```\n\nThe `\u003cProvider\u003e` component is used to share the state via context.\nThe `\u003cState\u003e` component takes 2 props:\n\n* `select` is a function that takes the entire state, and returns only the part of it that the children will need\n* `render` is a [render prop](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) that takes the `selected state` and the `update` function as parameters, giving the user full control on what to render based on props and state.\n\nState updates happen via special `updater` functions that take the old state as a parameter and return the new state, triggering a rerender.\n\nAn updater function may return the slice of the state that changed or an entire new state. In the first case the new slice will be shallowly merged with old state.\n\n## API\n\n### `\u003cProvider\u003e`\n\nMakes state available to children `\u003cState\u003e`\n\n#### props\n\n##### `state`\n\n\u003e `object` | required\n\nThe initial state\n\n##### `inspect`\n\n\u003e `function(oldState: object, newState: object, updaterFn: function)`\n\nUse the inspect prop during development to track state changes.\n\n`statty` comes with a default logger inspired by redux-logger.\n\n```jsx\n\u003cProvider\n  state={{count: 0}}\n  inspect={require('statty/inspect')}\n/\u003e\n```\n\n### `\u003cState\u003e`\n\nConnects children to state changes, and provides them with the `update` function\n\n#### props\n\n##### `select`\n\n\u003e `function(state: object) | defaults to s =\u003e s | returns object`\n\nSelects the slice of the state needed by the children components.\n\n##### `render`\n\n\u003e `function(state: object, update: function)` | required\n\nA render prop that takes the state returned by the `selector` and an `update` function.\n\n\n## Examples\n\nExamples exist on [codesandbox.io](https://codesandbox.io/search?refinementList%5Btags%5D%5B0%5D=statty%3Aexample\u0026page=1):\n\n- [Counter](https://codesandbox.io/s/rzpxx0w34)\n- [Preact example without Preact compat (codepen)](https://codepen.io/vesparny/pen/gGgyVN)\n- [Counter with reducer](https://codesandbox.io/s/jp9zj98l5w)\n- [Counter with async interactions](https://codesandbox.io/s/kxkp47o597)\n- [Wikipedia searchbox with RxJS and Ramda](https://codesandbox.io/s/7wx3v8jqqq)\n- [Wikipedia searchbox + Downshift integration](https://codesandbox.io/s/pymj32z5kj)\n- [Tree-view example](https://codesandbox.io/s/3y146z2qop) (shows how to get good performance with nested subscriptions).\n\nIf you would like to add an example, follow these steps:\n\n1) Fork this [codesandbox](https://codesandbox.io/s/rzpxx0w34)\n2) Make sure your version (under dependencies) is the latest available version\n3) Update the title and description\n4) Update the code for your example (add some form of documentation to explain what it is)\n5) Add the tag: `statty:example`\n\n## Inspiration\n\n* [Michael Jackson](https://github.com/mjackson)'s post on [render props](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)\n* [refunk](https://github.com/jxnblk/refunk/)\n\n## Tests\n\n```sh\n$ npm run test\n```\n\n## LICENSE\n\n[MIT License](LICENSE.md) © [Alessandro Arnodo](https://alessandro.arnodo.net/)\n","funding_links":[],"categories":["react","Uncategorized","JavaScript","List","Components"],"sub_categories":["Uncategorized","Data"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvesparny%2Fstatty","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvesparny%2Fstatty","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvesparny%2Fstatty/lists"}