{"id":13481444,"url":"https://github.com/ianstormtaylor/react-values","last_synced_at":"2025-09-28T23:32:20.228Z","repository":{"id":57347329,"uuid":"140340857","full_name":"ianstormtaylor/react-values","owner":"ianstormtaylor","description":"A set of tiny React components for handling state with render props.","archived":true,"fork":false,"pushed_at":"2019-03-05T10:55:57.000Z","size":2730,"stargazers_count":1012,"open_issues_count":6,"forks_count":39,"subscribers_count":26,"default_branch":"master","last_synced_at":"2025-01-09T16:08:27.758Z","etag":null,"topics":["components","headless","react","render-props","state-management"],"latest_commit_sha":null,"homepage":"https://git.io/react-values","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/ianstormtaylor.png","metadata":{"files":{"readme":"Readme.md","changelog":"Changelog.md","contributing":"Contributing.md","funding":null,"license":"License.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-09T20:51:35.000Z","updated_at":"2024-12-10T06:39:00.000Z","dependencies_parsed_at":"2022-08-28T04:00:29.044Z","dependency_job_id":null,"html_url":"https://github.com/ianstormtaylor/react-values","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianstormtaylor%2Freact-values","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianstormtaylor%2Freact-values/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianstormtaylor%2Freact-values/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianstormtaylor%2Freact-values/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ianstormtaylor","download_url":"https://codeload.github.com/ianstormtaylor/react-values/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234575214,"owners_count":18854924,"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":["components","headless","react","render-props","state-management"],"created_at":"2024-07-31T17:00:51.874Z","updated_at":"2025-09-28T23:32:19.649Z","avatar_url":"https://github.com/ianstormtaylor.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Libraries","Components","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["Data"],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"#\"\u003e\u003cimg src=\"./docs/images/banner.png\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  A set of \u003cem\u003etiny\u003c/em\u003e, composable React components \u003cbr/\u003e\n  for handling state with render props.\n\u003c/p\u003e\n\u003cbr/\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#why\"\u003e\u003cstrong\u003eWhy?\u003c/strong\u003e\u003c/a\u003e ·\n  \u003ca href=\"#principles\"\u003e\u003cstrong\u003ePrinciples\u003c/strong\u003e\u003c/a\u003e ·\n  \u003ca href=\"#examples\"\u003e\u003cstrong\u003eExamples\u003c/strong\u003e\u003c/a\u003e ·\n  \u003ca href=\"#documentation\"\u003e\u003cstrong\u003eDocumentation\u003c/strong\u003e\u003c/a\u003e ·\n  \u003ca href=\"#contributing\"\u003e\u003cstrong\u003eContributing!\u003c/strong\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://unpkg.com/react-values/dist/react-values.min.js\"\u003e\n    \u003cimg src=\"https://img.badgesize.io/https://unpkg.com/react-values/dist/react-values.min.js?compression=gzip\u0026amp;label=react--values\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"./packages/react-values/package.json\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/react-values.svg?maxAge=3600\u0026label=react-values\u0026colorB=007ec6\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\n`react-values` gives you a set of simple, composable helpers that let you build more complex, stateful UI components like toggles, dropdowns, lists, checkbox groups, popovers, tooltips, you name it!\n\nIt does this using a small render-prop-based API that exposes helpful transforms like `toggle`, `increment`, `filter`, etc. depending on the type of value, all based on JavaScripts native value types...\n\n* `Any` values provide simple transforms like `set` and `clear`.\n* `Array` values provide native methods like `push`, `pop`, `filter`, etc.\n* `Boolean` values provide `toggle`, which we've all re-implemented 100 times.\n* `Date` values provide really helpful transforms like `setHours` and `incrementMonth`.\n* `Map` values provide native methods like `set`, `delete` and `clear`.\n* `Number` values provide `increment` and `decrement`, which have also been re-written in every codebase ever.\n* `Object` values provide helpful transforms like `set`, `unset` and `assign`.\n* `Set` values provide native methods like `add`, `delete` and `clear`.\n* `String` values provide native methods like `concat`, `repeat`, `trim`, etc.\n\nThis saves you from constantly re-writing the same state management logic, so you can keep your components focused on behavior and presentation.\n\nFor example, here's the classic state management \"counter\" example:\n\n```jsx\nimport { NumberValue } from 'react-values'\n\nconst Counter = () =\u003e (\n  \u003cNumberValue defaultValue={0}\u003e\n    {({ value, increment, decrement }) =\u003e (\n      \u003cbutton onClick={() =\u003e increment()}\u003e+1\u003c/button\u003e\n      \u003cspan\u003e{value}\u003c/span\u003e\n      \u003cbutton onClick={() =\u003e decrement()}\u003e-1\u003c/button\u003e\n    )}\n  \u003c/NumberValue\u003e\n)\n```\n\nOf going further, here's a full fledged `\u003cToggle\u003e` (respecting `value/defaultValue` and providing `onChange`) implemented in just a few lines of code using a `\u003cBooleanValue\u003e`:\n\n```jsx\nimport { BooleanValue } from 'react-values'\n\nconst Toggle = ({ value, defaultValue, onChange }) =\u003e (\n  \u003cBooleanValue value={value} defaultValue={defaultValue} onChange={onChange}\u003e\n    {({ value: on, toggle }) =\u003e (\n      \u003cTrack on={on} onClick={toggle}\u003e\n        \u003cThumb on={on} /\u003e\n      \u003c/Track\u003e\n    )}\n  \u003c/BooleanValue\u003e\n)\n\nconst Track = styled.div`\n  position: relative;\n  height: 25px;\n  width: 50px;\n  background-color: ${props =\u003e (props.on ? 'lightgreen' : 'lightgray')};\n  border-radius: 50px;\n`\n\nconst Thumb = styled.div`\n  position: absolute;\n  left: ${props =\u003e (props.on ? '25px' : '0')};\n  height: 25px;\n  width: 25px;\n  background-color: white;\n  border-radius: 50px;\n`\n```\n\nBut you can go further, because `react-values` can \"connect\" a single value across multiple components. This is helpful any time you need a \"global\" piece of state in your app, without wanting to add tons of complexity.\n\nFor example, using the `\u003cToggle\u003e` from above, here's a modal you can open and close from anywhere in your app:\n\n```jsx\nimport { createBooleanValue } from 'react-values'\nimport { Modal, Toggle } from './ui'\n\nconst ModalValue = createBooleanValue(false)\n\nconst App = () =\u003e (\n  \u003cdiv class=\"app\"\u003e\n    \u003cdiv class=\"sidebar\"\u003e\n      \u003cModalValue\u003e\n        {({ value, set }) =\u003e (\n          \u003cToggle value={value} onChange={set} /\u003e\n        )}\n      \u003c/ModalValue\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"content\"\u003e\n      \u003cModalValue\u003e\n        {({ value: opened }) =\u003e (\n          opened \u0026\u0026 \u003cModal /\u003e\n        )}\n      \u003c/ModalValue\u003e\n    \u003c/div\u003e\n  \u003cdiv\u003e\n)\n```\n\nThe primitives `react-values` gives you seem simple at first, but they can be composed together to create complex behaviors that are still easy to reason about, in just a few lines of code.\n\n\u003cbr/\u003e\n\n### Why?\n\nWhile building an app with React, you end up building a lot of stateful components in the process. Whether at the UI kit level for things like toggles, tooltips, checkbox groups, dropdown, etc. Or at the app level for modals, popovers, sorting, filtering, etc.\n\nIn the process, you end up re-implementing run of the mill state handling logic all over the place—whether with `this.setState` or by adopting some \"state management framework\" and writing the same boilerplate over and over again. And for your components to be nicely reusable across your application you augment them to handle both \"controlled\" and \"uncontrolled\" use cases using `value` or `defaultValue`. And to make things a bit more manageable, you re-invent common transforms like `open`, `close`, `toggle`, `increment`, `decrement`, etc. in lots of different components. And if you're working with a team, you end up doing all of this in slightly different ways throughout your codebase.\n\nIn the end, you're now maintaing a lot more logic than necessary, duplicated in many different places in slightly different ways. It gets harder and harder to understand your app's data flow. All while your app's bundle size grows.\n\n`react-values` solves all of that with a few principles...\n\n\u003cbr/\u003e\n\n### Principles\n\n1. **Leverage render props.** It uses a render-prop-based API, exposing its state and a handful of convenient transform functions to you with the flexible function-as-children pattern.\n\n2. **Follow React's conventions.** Its components follow React's own naming conventions, using familiar concepts like `value/defaultValue`. This makes it extremely easy to slot into existing codebases or frameworks.\n\n3. **Follow JavaScript's conventions.** It exposes JavaScript's familiar, built-in methods like `setDate/setHours`, `push/pop`, `filter`, `concat`, etc. to avoid reinventing the wheel and forcing you to constantly read documentation.\n\n4. **Be extremely lightweight.** It's extremely lightweight (and tree-shakeable), with most components weighing just a few hundred bytes, so you can even import it from public-facing component libraries.\n\n5. **Prioritize convenience.** It's designed to provide convenient functions like `increment`, `toggle`, and smarter ones like `incrementDate`, `decrementMonth`, so you can build complex interactions in just a few lines of code.\n\n\u003cbr/\u003e\n\n### Examples\n\nTo get a sense for how you might use `react-values`, check out a few of the examples:\n\n* [**Basic Toggle**](https://ianstormtaylor.github.io/react-values/#/basic-toggle) — using a `Boolean` to create a simple toggle component.\n* [**Reusable Toggle**](https://ianstormtaylor.github.io/react-values/#/reusable-toggle) — showing how you might turn that toggle into a controlled component in your own UI kit.\n* [**Counter**](https://ianstormtaylor.github.io/react-values/#/counter) — a simple counter using a `Number` and its convenience transforms.\n* [**Connected Counters**](https://ianstormtaylor.github.io/react-values/#/connected-counters) — two counters that are connected together, sharing a single value.\n* [**Time Picker**](https://ianstormtaylor.github.io/react-values/#/time-picker) — a more complex time picker component, using `Date` and its convenience transforms.\n* [**Filtering**](https://ianstormtaylor.github.io/react-values/#/filtering) — a basic `String` value used for filtering a list.\n* [**Checkbox Set**](https://ianstormtaylor.github.io/react-values/#/checkbox-set) — using a `Set` to keep track of a checkbox group.\n* [**Simple Tooltip**](https://ianstormtaylor.github.io/react-values/#/tooltip) — a simplistic tooltip implemented as a `Boolean`.\n* [**Simple Modal**](https://ianstormtaylor.github.io/react-values/#/modal) — a simplistic modal implemented as a `Boolean`.\n* [**Connected Modal**](https://ianstormtaylor.github.io/react-values/#/connected-modal) — a modal whose opened/closed state is controllable from other components.\n\nIf you have an idea for an example that shows a common use case, pull request it!\n\n\u003cbr/\u003e\n\n### Documentation\n\nIf you're using `react-values` for the first time, check out the [Getting Started](./docs/guide.md) guide to familiarize yourself with how it works. Once you've done that, you'll probably want to check out the full [API Reference](http://docs.slatejs.org/react-values-core).\n\n* [**Getting Started**](./docs/guide.md)\n  * [Installing `react-values`](./docs/guide.md#installing-react-values)\n  * [Building a Component](./docs/guide.md#building-a-component)\n  * [Introducing State](./docs/guide.md#introducing-state)\n  * [Observing Changes](./docs/guide.md#observing-changes)\n  * [Setting Defaults](./docs/guide.md#settings-defaults)\n  * [Controlled vs. Uncontrolled](./docs/guide.md#controlled-vs-uncontrolled)\n  * [Spreading Props](./docs/guide.md#spreading-props)\n* [**Reference**](./docs/reference.md)\n  * [**Components**](./docs/reference.md#value)\n    * [`\u003cValue\u003e`](./docs/reference.md#value)\n    * [`\u003cArrayValue\u003e`](./docs/reference.md#arrayvalue)\n    * [`\u003cBooleanValue\u003e`](./docs/reference.md#booleanvalue)\n    * [`\u003cDateValue\u003e`](./docs/reference.md#datevalue)\n    * [`\u003cMapValue\u003e`](./docs/reference.md#mapvalue)\n    * [`\u003cNumberValue\u003e`](./docs/reference.md#numbervalue)\n    * [`\u003cObjectValue\u003e`](./docs/reference.md#objectvalue)\n    * [`\u003cSetValue\u003e`](./docs/reference.md#setvalue)\n    * [`\u003cStringValue\u003e`](./docs/reference.md#stringvalue)\n  * [**Connected Components**](./docs/reference.md#createvalue)\n    * [`createValue`](./docs/reference.md#createvalue)\n    * [`createArrayValue`](./docs/reference.md#createarrayvalue)\n    * [`createBooleanValue`](./docs/reference.md#createbooleanvalue)\n    * [`createDateValue`](./docs/reference.md#createdatevalue)\n    * [`createMapValue`](./docs/reference.md#createmapvalue)\n    * [`createNumberValue`](./docs/reference.md#createnumbervalue)\n    * [`createObjectValue`](./docs/reference.md#createobjectvalue)\n    * [`createSetValue`](./docs/reference.md#createsetvalue)\n    * [`createStringValue`](./docs/reference.md#createstringvalue)\n\nIf even that's not enough, you can always [read the source itself](./src).\n\nThere are also translations of the documentation into other languages:\n\n* [中文 (Chinese)](https://github.com/chinanf-boy/react-values-zh)\n\nIf you're maintaining a translation, feel free to pull request it here!\n\n\u003cbr/\u003e\n\n### Contributing!\n\nAll contributions are super welcome! Check out the [Contributing instructions](./Contributing.md) for more info!\n\n`react-values` is [MIT-licensed](./License.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fianstormtaylor%2Freact-values","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fianstormtaylor%2Freact-values","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fianstormtaylor%2Freact-values/lists"}