{"id":13511354,"url":"https://github.com/react-native-toolkit/rex-state","last_synced_at":"2025-03-30T20:33:02.285Z","repository":{"id":40289375,"uuid":"242039426","full_name":"react-native-toolkit/rex-state","owner":"react-native-toolkit","description":"Convert hooks into shared states between React components","archived":true,"fork":false,"pushed_at":"2022-12-10T18:59:19.000Z","size":5276,"stargazers_count":31,"open_issues_count":21,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-08-06T07:06:49.259Z","etag":null,"topics":["hacktoberfest","react","react-hooks","redux","rex","rex-state","state","state-management","userex-hook"],"latest_commit_sha":null,"homepage":"https://rex-state.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/react-native-toolkit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"custom":["buymeacoffee.com/daniakash"]}},"created_at":"2020-02-21T02:45:19.000Z","updated_at":"2024-08-06T07:06:49.260Z","dependencies_parsed_at":"2023-01-26T10:16:15.249Z","dependency_job_id":null,"html_url":"https://github.com/react-native-toolkit/rex-state","commit_stats":null,"previous_names":["daniakash/rex-state"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-toolkit%2Frex-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-toolkit%2Frex-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-toolkit%2Frex-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-toolkit%2Frex-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-native-toolkit","download_url":"https://codeload.github.com/react-native-toolkit/rex-state/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246379366,"owners_count":20767694,"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":["hacktoberfest","react","react-hooks","redux","rex","rex-state","state","state-management","userex-hook"],"created_at":"2024-08-01T03:00:48.136Z","updated_at":"2025-03-30T20:33:01.742Z","avatar_url":"https://github.com/react-native-toolkit.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg\n  src=\"https://github.com/react-native-toolkit/rex-state/raw/master/assets/logo.png\"\n  alt=\"rex-state-logo\"\n  height=\"100px\"\n  width=\"100px\"\n/\u003e\n\n# Rex State\n\nConvert hooks into shared states between React components\n\n[![Build Status][build-badge]][build]\n[![Maintainability][maintainability-badge]][maintainability-url]\n[![Test Coverage][coverage-badge]][coverage-url]\n\n[![Version][version-badge]][package]\n[![Downloads][downloads-badge]][npmtrends]\n[![Bundlephobia][bundle-phobia-badge]][bundle-phobia]\n\n[![Star on GitHub][github-star-badge]][github-star]\n[![Watch on GitHub][github-watch-badge]][github-watch]\n[![Twitter Follow][twitter-badge]][twitter]\n\n[![donate][coffee-badge]][coffee-url]\n[![sponsor][sponsor-badge]][sponsor-url]\n[![support][support-badge]][support-url]\n\n[![Storybook][storybook-badge]][website] [![Chromatic][chromatic-badge]][chromatic]\n\n---\n\n### PRs Welcome 👍✨\n\n\u003c/div\u003e\n\n- 📦 [Installation](#installation)\n- ℹ️ [Usage](#usage)\n- 📑 [Documentation][storybook-url]\n- 👨🏽‍🏫 Examples\n  - [Simple Counter][codesandbox-example] with React.js on CodeSandbox\n  - [Dark Mode][expo-app] with React Native on expo. Project in [`example/`](https://github.com/react-native-toolkit/rex-state/tree/master/example) directory\n- ✨ [Why Rex State?](#why-rex-state)\n\n## Requirements\n\nRex State is built purely on React Hooks hence it requires React \u003e 16.8 to work.\n\n## Installation\n\n```sh\nyarn add rex-state\n\n# or\n\nnpm i rex-state\n```\n\n## Usage\n\nConsider the following hook which lets you toggle theme between light \u0026 dark modes\n\n```jsx\nconst useThemeMode = (initialTheme = 'light') =\u003e {\n  const [theme, setTheme] = useState(initialTheme);\n\n  const toggleTheme = () =\u003e setTheme(theme === 'light' ? 'dark' : 'light');\n\n  return [theme, toggleTheme];\n};\n```\n\nYou can use the `createRexStore` module from rex state to create a provider \u0026 a store hook to access the result of your `useThemeMode`\n\n```jsx\nimport { createRexStore } from 'rex-state';\n\nconst { useStore: useTheme, RexProvider: ThemeProvider } = createRexStore(\n  useThemeMode\n);\n```\n\nThe `useStore` hook \u0026 `RexProvider` are renamed to `useTheme` \u0026 `ThemeProvider` for use in the application.\n\nNow you can wrap your entire Application inside the `ThemeProvider` to ensure the context is setup properly for the `useTheme` hook.\n\n```jsx\nconst App = () =\u003e {\n  return (\n    \u003cThemeProvider value=\"dark\"\u003e\n      {/* Rest of your application */}\n      \u003cToggleButton /\u003e\n      \u003cThemeText /\u003e\n    \u003c/ThemeProvider\u003e\n  );\n};\n```\n\n\u003e Note: The value of the argument of `useThemeMode` function - `initialTheme` is supplied to the `ThemeProvider` using the `value` prop. The `value` prop only supports a single argument. Hence if your hook requires multiple arguments, you can pass them as a single object\n\nOnce you add the `ThemeProvider` to the top of your application's tree, the child components can now use the `useTheme` hook to access the result of your `useThemeMode` hook. This time, when you call `toggleTheme` in any of the child components, it will cause your entire application tree to re-render \u0026 all the components that use the `useTheme` hook will have the updated value!\n\nThe following is a toggle button that toggles the theme when users click on it.\n\n```jsx\nconst ToggleButton = () =\u003e {\n  const [theme, toggleTheme] = useTheme();\n\n  return (\n    \u003cView\u003e\n      \u003cText\u003eIs Dark Mode?\u003c/Text\u003e\n      \u003cSwitch value={theme === 'dark'} onValueChange={toggleTheme} /\u003e\n    \u003c/View\u003e\n  );\n};\n```\n\nThe next component is a text block that simply displays the theme's mode\n\n```jsx\nconst ThemeText = () =\u003e {\n  const [theme] = useTheme();\n\n  return (\n    \u003c\u003e\n      \u003cText\u003eTheme Mode: \u003c/Text\u003e\n      \u003cText\u003e{theme}\u003c/Text\u003e\n    \u003c/\u003e\n  );\n};\n```\n\nInvoking the `toggleTheme` function from the `\u003cToggleButton/\u003e` component updates the `\u003cThemeText/\u003e` component. This means your hook is now a shared state between the two components!\n\nAlso, check out the [counter example](https://codesandbox.io/s/rex-counter-2m4zy?file=/src/App.js) from codesandbox\n\nRex State is good for some use cases and not suitable for some use cases since it uses the [React Context](https://reactjs.org/docs/context.html#api) API which is considered inefficient as a change causes the entire React child tree to re-render. Read the [performance](https://rex-state.netlify.app/?path=/story/intro-performance--page) section to see how to use Rex State effectively.\n\n## Why Rex State?\n\nRex State is a handy utility to make your hooks more powerful. It is simple, un-opinionated \u0026 is very tiny!\n\n## Licenses\n\nMIT © [DaniAkash][twitter]\n\n[codesandbox-example]: https://codesandbox.io/s/rex-counter-2m4zy?file=/src/App.js\n[storybook-url]: https://rex-state.netlify.app\n[expo-app]: https://expo.io/@daniakash/rex-state-example\n[coffee-badge]: https://img.shields.io/badge/-%E2%98%95%EF%B8%8F%20buy%20me%20a%20coffee-e85b46\n[coffee-url]: https://www.buymeacoffee.com/daniakash\n[sponsor-badge]: https://img.shields.io/badge/-%F0%9F%8F%85%20sponsor%20this%20project-e85b46\n[sponsor-url]: https://www.buymeacoffee.com/daniakash/e/6983\n[support-badge]: https://img.shields.io/badge/-Get%20Support-e85b46\n[support-url]: https://www.buymeacoffee.com/daniakash/e/7030\n[build]: https://github.com/react-native-toolkit/rex-state/actions\n[build-badge]: https://github.com/react-native-toolkit/rex-state/workflows/build/badge.svg\n[coverage-badge]: https://api.codeclimate.com/v1/badges/9bd775907eca8a3dbab3/test_coverage\n[coverage-url]: https://codeclimate.com/github/react-native-toolkit/rex-state/test_coverage\n[maintainability-badge]: https://api.codeclimate.com/v1/badges/9bd775907eca8a3dbab3/maintainability\n[maintainability-url]: https://codeclimate.com/github/react-native-toolkit/rex-state/maintainability\n[bundle-phobia-badge]: https://badgen.net/bundlephobia/minzip/rex-state\n[bundle-phobia]: https://bundlephobia.com/result?p=rex-state\n[downloads-badge]: https://img.shields.io/npm/dm/rex-state.svg\n[npmtrends]: http://www.npmtrends.com/rex-state\n[package]: https://www.npmjs.com/package/rex-state\n[version-badge]: https://img.shields.io/npm/v/rex-state.svg\n[twitter]: https://twitter.com/dani_akash_\n[twitter-badge]: https://img.shields.io/twitter/follow/dani_akash_?style=social\n[github-watch-badge]: https://img.shields.io/github/watchers/DaniAkash/rex.svg?style=social\n[github-watch]: https://github.com/DaniAkash/rex/watchers\n[github-star-badge]: https://img.shields.io/github/stars/DaniAkash/rex.svg?style=social\n[github-star]: https://github.com/DaniAkash/rex/stargazers\n[storybook-badge]: https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg\n[website]: https://rex-state.netlify.app\n[chromatic-badge]: https://img.shields.io/badge/-chromatic-%23fc521f\n[chromatic]: https://chromatic.com/library?appId=5f5b21fe6f304800225bd9cf\u0026branch=master\n","funding_links":["buymeacoffee.com/daniakash","https://www.buymeacoffee.com/daniakash","https://www.buymeacoffee.com/daniakash/e/6983","https://www.buymeacoffee.com/daniakash/e/7030"],"categories":["react"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-native-toolkit%2Frex-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-native-toolkit%2Frex-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-native-toolkit%2Frex-state/lists"}