{"id":36500096,"url":"https://github.com/react-easier/spreado","last_synced_at":"2026-01-12T02:19:43.227Z","repository":{"id":36953716,"uuid":"449207879","full_name":"react-easier/spreado","owner":"react-easier","description":"Easier to spread things across React components","archived":false,"fork":false,"pushed_at":"2022-12-05T08:06:00.000Z","size":110,"stargazers_count":28,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2023-12-26T07:08:16.975Z","etag":null,"topics":["mobx","react","react-easier","react-query","redux","redux-toolkit","share","spread","spreado","swr"],"latest_commit_sha":null,"homepage":"","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-easier.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-18T08:50:02.000Z","updated_at":"2023-09-26T03:26:41.000Z","dependencies_parsed_at":"2023-01-17T08:01:14.508Z","dependency_job_id":null,"html_url":"https://github.com/react-easier/spreado","commit_stats":null,"previous_names":[],"tags_count":25,"template":null,"template_full_name":null,"purl":"pkg:github/react-easier/spreado","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-easier%2Fspreado","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-easier%2Fspreado/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-easier%2Fspreado/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-easier%2Fspreado/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-easier","download_url":"https://codeload.github.com/react-easier/spreado/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-easier%2Fspreado/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28331968,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T00:36:25.062Z","status":"online","status_checked_at":"2026-01-12T02:00:08.677Z","response_time":98,"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":["mobx","react","react-easier","react-query","redux","redux-toolkit","share","spread","spreado","swr"],"created_at":"2026-01-12T02:19:37.084Z","updated_at":"2026-01-12T02:19:43.215Z","avatar_url":"https://github.com/react-easier.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Spreado\n\n[![](https://img.shields.io/codecov/c/github/react-easier/spreado/main)](https://app.codecov.io/gh/react-easier/spreado)\n[![](https://img.shields.io/npm/dm/spreado)](https://www.npmjs.com/package/spreado)\n[![](https://img.shields.io/github/license/react-easier/spreado)](https://github.com/react-easier/spreado/blob/main/LICENSE)\n[![](https://img.shields.io/badge/semantic--release-conventional-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)\n\n\u003e Easier to spread things across React components\n\n## Why\n\nIt's common to use a combination of a state managing lib (like [Redux](https://github.com/reduxjs/redux)) and a data fetching lib (like [React Query](https://github.com/tannerlinsley/react-query)) in the development of a React app. But spreading a data fetching result from a React component to another is tedious. The work involves mapping the data fetching result to a timely-updated redux state so to share the access beyond the current React component.\n\nSpreado provides a set of intuitive APIs to simplify that kind of tedious work for you, making spreading things easily across React components. The combinations of well-known state managing libs and data fetching libs are supported and those supported libs are only regarded as peer dependencies. The bonus is, any usages of peer dependencies are kept still available.\n\n## Install\n\n```sh\nnpm install spreado\n```\n\n## Usage\n\n### Spread a result of data fetching\n\nSupposing the `ComponentA` prepares params and fetches data with those params using the `useQuery` from React Query (or using the `useSWR` from SWR), and now we want to get the data fetching result visited in the `ComponentB`, the implementation with Spreado looks like:\n\n```tsx\nimport {\n  useQuery, // or useSWR from `swr`\n} from 'react-query';\nimport {useSpreadIn, useSpreadOut} from 'spreado';\n\nconst INDEX_OF_SOME_DATA_QUERY = 'INDEX_OF_SOME_DATA_QUERY';\n\nfunction useSomeDataQuerySpreadOut(params: ParamsForSomeDataQuery) {\n  return useSpreadOut(\n    INDEX_OF_SOME_DATA_QUERY,\n    useQuery([INDEX_OF_SOME_DATA_QUERY, params], () =\u003e fetch_some_data_with_params(params))\n  );\n}\n\nfunction useSomeDataQuerySpreadIn() {\n  return useSpreadIn\u003cReturnType\u003ctypeof useSomeDataQuerySpreadOut\u003e\u003e(INDEX_OF_SOME_DATA_QUERY, {});\n}\n\nconst ComponentA: FC = () =\u003e {\n  const params = prepare_params_for_fetching_some_data();\n  const {isLoading, isSuccess, data, refetch} = useSomeDataQuerySpreadOut(params);\n  return (\n    \u003cdiv\u003e\n      {isLoading \u0026\u0026 \u003cLoading /\u003e}\n      {isSuccess \u0026\u0026 \u003cResultA data={data} /\u003e}\n      \u003cbutton onClick={() =\u003e refetch()}\u003eRefresh data\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\nconst ComponentB: FC = () =\u003e {\n  const {isLoading, isSuccess, data} = useSomeDataQuerySpreadIn();\n  return (\n    \u003cdiv\u003e\n      {isLoading \u0026\u0026 \u003cLoading /\u003e}\n      {isSuccess \u0026\u0026 \u003cResultB data={data} /\u003e}\n    \u003c/div\u003e\n  );\n};\n```\n\nThe snake-case named functions are placeholders. The data fetching result gets spread by `useSomeDataQuerySpreadOut` in `ComponentA` and gets visited by `useSomeDataQuerySpreadIn` in `ComponentB`. The second param of `useSpreadIn` is a fallback value in case the spread value is not available. The data fetching result stays timely-updated in `ComponentB` even if the data fetching helper `refetch` is invoked in `ComponentA`.\n\n### Initialization\n\nSpreado expects a pair of a state managing lib and a data fetching lib has been adopted by your React app. It aims to integrate with them well but won't re-invent wheels itself. Most well-known libs of the categories (e.g. [Redux](https://github.com/reduxjs/redux), [MobX](https://github.com/mobxjs/mobx), [React Query](https://github.com/tannerlinsley/react-query), [SWR](https://github.com/vercel/swr)) have been supported by spreado. You may pick up your preferred pair, then setup spreado as follows:\n\n#### For Redux and React Query\n\n```tsx\n// Requires peer dependencies installed: `react`, `redux`, `react-redux`, `react-query`.\nimport React, {FC} from 'react';\nimport {QueryClient, QueryClientProvider} from 'react-query';\nimport {Provider as ReduxProvider} from 'react-redux';\nimport {combineReducers, createStore} from 'redux';\nimport {SpreadoSetupProvider} from 'spreado';\nimport {\n  spreadoReduxReducerPack,\n  SpreadoSetupForReduxReactQuery,\n} from 'spreado/for-redux-react-query';\n\nconst store = createStore(combineReducers(spreadoReduxReducerPack));\nconst queryClient = new QueryClient();\nconst spreadoSetup = new SpreadoSetupForReduxReactQuery({store, queryClient});\n\nconst App: FC = () =\u003e {\n  return (\n    \u003cReduxProvider store={store}\u003e\n      \u003cQueryClientProvider client={queryClient}\u003e\n        \u003cSpreadoSetupProvider setup={spreadoSetup}\u003e\n          \u003cdiv\u003e...\u003c/div\u003e\n        \u003c/SpreadoSetupProvider\u003e\n      \u003c/QueryClientProvider\u003e\n    \u003c/ReduxProvider\u003e\n  );\n};\n```\n\n#### For Redux Toolkit and React Query\n\n```tsx\n// Requires peer dependencies installed: `react`, `@reduxjs/toolkit`, `react-redux`, `react-query`.\nimport {configureStore} from '@reduxjs/toolkit';\nimport React, {FC} from 'react';\nimport {QueryClient, QueryClientProvider} from 'react-query';\nimport {Provider as ReduxProvider} from 'react-redux';\nimport {SpreadoSetupProvider} from 'spreado';\nimport {\n  spreadoReduxReducerPack,\n  SpreadoSetupForReduxReactQuery,\n} from 'spreado/for-redux-react-query';\n\nconst store = configureStore({\n  reducer: spreadoReduxReducerPack,\n  middleware: (m) =\u003e m({serializableCheck: false}),\n});\nconst queryClient = new QueryClient();\nconst spreadoSetup = new SpreadoSetupForReduxReactQuery({store, queryClient});\n\nconst App: FC = () =\u003e {\n  return (\n    \u003cReduxProvider store={store}\u003e\n      \u003cQueryClientProvider client={queryClient}\u003e\n        \u003cSpreadoSetupProvider setup={spreadoSetup}\u003e\n          \u003cdiv\u003e...\u003c/div\u003e\n        \u003c/SpreadoSetupProvider\u003e\n      \u003c/QueryClientProvider\u003e\n    \u003c/ReduxProvider\u003e\n  );\n};\n```\n\n#### For Redux and SWR\n\n```tsx\n// Requires peer dependencies installed: `react`, `redux`, `react-redux`, `swr`.\nimport React, {FC} from 'react';\nimport {Provider as ReduxProvider} from 'react-redux';\nimport {combineReducers, createStore} from 'redux';\nimport {SpreadoSetupProvider} from 'spreado';\nimport {spreadoReduxReducerPack, SpreadoSetupForReduxSwr} from 'spreado/for-redux-swr';\n\nconst store = createStore(combineReducers(spreadoReduxReducerPack));\nconst spreadoSetup = new SpreadoSetupForReduxSwr({store});\n\nconst App: FC = () =\u003e {\n  return (\n    \u003cReduxProvider store={store}\u003e\n      \u003cSpreadoSetupProvider setup={spreadoSetup}\u003e\n        \u003cdiv\u003e...\u003c/div\u003e\n      \u003c/SpreadoSetupProvider\u003e\n    \u003c/ReduxProvider\u003e\n  );\n};\n```\n\n#### For Redux Toolkit and SWR\n\n```tsx\n// Requires peer dependencies installed: `react`, `@reduxjs/toolkit`, `react-redux`, `swr`.\nimport {configureStore} from '@reduxjs/toolkit';\nimport React, {FC} from 'react';\nimport {Provider as ReduxProvider} from 'react-redux';\nimport {SpreadoSetupProvider} from 'spreado';\nimport {spreadoReduxReducerPack, SpreadoSetupForReduxSwr} from 'spreado/for-redux-swr';\n\nconst store = configureStore({\n  reducer: spreadoReduxReducerPack,\n  middleware: (m) =\u003e m({serializableCheck: false}),\n});\nconst spreadoSetup = new SpreadoSetupForReduxSwr({store});\n\nconst App: FC = () =\u003e {\n  return (\n    \u003cReduxProvider store={store}\u003e\n      \u003cSpreadoSetupProvider setup={spreadoSetup}\u003e\n        \u003cdiv\u003e...\u003c/div\u003e\n      \u003c/SpreadoSetupProvider\u003e\n    \u003c/ReduxProvider\u003e\n  );\n};\n```\n\n#### For MobX and React Query\n\n```tsx\n// Requires peer dependencies installed: `react`, `mobx`, `react-query`.\nimport React, {FC} from 'react';\nimport {QueryClient, QueryClientProvider} from 'react-query';\nimport {SpreadoSetupProvider} from 'spreado';\nimport {SpreadoSetupForMobXReactQuery} from 'spreado/for-mobx-react-query';\n\nconst queryClient = new QueryClient();\nconst spreadoSetup = new SpreadoSetupForMobXReactQuery({queryClient});\n\nconst App: FC = () =\u003e {\n  return (\n    \u003cQueryClientProvider client={queryClient}\u003e\n      \u003cSpreadoSetupProvider setup={spreadoSetup}\u003e\n        \u003cdiv\u003e...\u003c/div\u003e\n      \u003c/SpreadoSetupProvider\u003e\n    \u003c/QueryClientProvider\u003e\n  );\n};\n```\n\n#### For MobX and SWR\n\n```tsx\n// Requires peer dependencies installed: `react`, `mobx`, `swr`.\nimport React, {FC} from 'react';\nimport {SpreadoSetupProvider} from 'spreado';\nimport {SpreadoSetupForMobXSwr} from 'spreado/for-mobx-swr';\nimport {SWRConfig} from 'swr';\n\nconst spreadoSetup = new SpreadoSetupForMobXSwr();\n\nconst App: FC = () =\u003e {\n  return (\n    \u003cSpreadoSetupProvider setup={spreadoSetup}\u003e\n      \u003cdiv\u003e...\u003c/div\u003e\n    \u003c/SpreadoSetupProvider\u003e\n  );\n};\n```\n\nNotice that constructors `SpreadoSetupForMobX...` optionally accept a param `store` that can get instantiated by `new SpreadoMobXStore()`. If the `store` is give, constructors `SpreadoSetupForMobX...` will use it. Otherwise, they will create one internally.\n\n### Maintain simple global states\n\nAnother potential usage of Spreado is to maintain simple global states. State managing libs are definitely able to maintain global state because that's just what they are created for. But when it comes to simple global states (like a boolean state), with Spreado we can maintain them more easily. Meanwhile, although Spreado builds its APIs based on the state managing lib in the React app, it only regards it as a peer dependency. That is, when it comes to complex global states (like some very complex array), the peer-dependency state managing lib is still available for us.\n\nAssuming there is a boolean global state that 2 components share, the implementation with Spreado looks like:\n\n```tsx\nimport {setSpreadOut, useSpreadIn} from 'spreado';\n\nconst INDEX_OF_IS_SOMETHING_VISIBLE = 'INDEX_OF_IS_SOMETHING_VISIBLE';\n\nfunction useIsSomethingVisible() {\n  return useSpreadIn\u003cboolean\u003e(INDEX_OF_IS_SOMETHING_VISIBLE, false);\n}\n\nfunction setIsSomethingVisible(v: boolean) {\n  return setSpreadOut(INDEX_OF_IS_SOMETHING_VISIBLE, v);\n}\n\nconst ComponentA: FC = () =\u003e {\n  const isSomethingVisible = useIsSomethingVisible();\n  return (\n    \u003cdiv\u003e\n      {isSomethingVisible \u0026\u0026 \u003cdiv\u003ePart A related to something\u003c/div\u003e}\n      \u003cbutton onClick={() =\u003e setIsSomethingVisible(true)}\u003eShow\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e setIsSomethingVisible(false)}\u003eHide\u003c/button\u003e\n      \u003cdiv\u003eEverything else in component A\u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n\nconst ComponentB: FC = () =\u003e {\n  const isSomethingVisible = useIsSomethingVisible();\n  return (\n    \u003cdiv\u003e\n      {isSomethingVisible \u0026\u0026 \u003cdiv\u003ePart B related to something\u003c/div\u003e}\n      \u003cdiv\u003eEverything else in component B\u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\nThe boolean global state `isSomethingVisible` is managed by the pair of functions `useIsSomethingVisible` and `setIsSomethingVisible` which read and write the value. The initial value of the state is specified by the second param of `useSpreadIn`.\n\n### Sever side rendering (SSR)\n\nSSR process of a modern React app works like this in general:\n\n1. When a http request for a html page hits the server side, the server side prepares data according to the http request, then the data are used to produce the initial global state of the root client side React component to render the html page. Meanwhile, the initial global state is serialized together with the html page.\n2. When a requested html page arrives in the client side, if the client side is a regular browser, the client side deserializes the initial global state and uses it together with the root client side React component to hydrate to initialize the React app. If the client side is a web crawler with JavaScript disabled, the html content remains available at least.\n\nSpreado follows that pattern. In the server side, spreado provides helpers for producing the initial global state. Let's take an example by continuing the usage section _Spread a result of data fetching_ and the spreado setup for `redux` and `react-query`:\n\n```tsx\nimport {INDEX_OF_SOME_DATA_QUERY} from '@/client';\nimport React from 'react';\nimport {renderToString} from 'react-dom/server';\nimport {QueryClient, QueryClientProvider} from 'react-query';\nimport {Provider as ReduxProvider} from 'react-redux';\nimport {combineReducers, createStore} from 'redux';\nimport {SpreadoSetupProvider} from 'spreado';\nimport {\n  createSpreadoReduxPreloadedState,\n  renderQueryResult,\n  spreadoReduxReducerPack,\n  SpreadoSetupForReduxReactQuery,\n} from 'spreado/for-redux-react-query';\n\napp.get('/some-page', (req, res) =\u003e {\n  const someData = prepare_some_data_according_to_the_http_request(req);\n\n  const initialGlobalState = createSpreadoReduxPreloadedState({\n    [INDEX_OF_SOME_DATA_QUERY]: renderQueryResult(someData),\n  });\n\n  const store = createStore(combineReducers(spreadoReduxReducerPack), initialGlobalState);\n  const queryClient = new QueryClient();\n  const spreadoSetup = new SpreadoSetupForReduxReactQuery({store, queryClient});\n\n  const htmlContent = renderToString(\n    \u003cReduxProvider store={store}\u003e\n      \u003cQueryClientProvider client={queryClient}\u003e\n        \u003cSpreadoSetupProvider setup={spreadoSetup}\u003e\n          \u003cdiv\u003e...\u003c/div\u003e\n        \u003c/SpreadoSetupProvider\u003e\n      \u003c/QueryClientProvider\u003e\n    \u003c/ReduxProvider\u003e\n  );\n\n  res.send(\n    `...\n\u003cscript\u003ewindow.INITIAL_GLOBAL_STATE='${JSON.stringify(initialGlobalState)}';\u003c/script\u003e\n\u003cdiv id=\"app\"\u003e${htmlContent}\u003c/div\u003e\n    ...`\n  );\n});\n```\n\nThe `app.get` is the pseudo code for handling http requests for html pages in the server side, the snake-case named functions are placeholders, and the `...` in `res.send` is the rest required html snippets for a working html page. Then, in the client side, we deserialize the initial global state and hydrate:\n\n```tsx\nimport React, {FC} from 'react';\nimport {hydrate} from 'react-dom';\nimport {QueryClient, QueryClientProvider} from 'react-query';\nimport {Provider as ReduxProvider} from 'react-redux';\nimport {combineReducers, createStore} from 'redux';\nimport {SpreadoSetupProvider} from 'spreado';\nimport {spreadoReduxReducerPack, SpreadoSetupForReduxReactQuery} from 'spreado/redux-react-query';\n\nconst store = createStore(\n  combineReducers(spreadoReduxReducerPack),\n  JSON.parse(window.INITIAL_GLOBAL_STATE)\n);\nconst queryClient = new QueryClient();\nconst spreadoSetup = new SpreadoSetupForReduxReactQuery({store, queryClient});\n\nconst App: FC = () =\u003e {\n  return (\n    \u003cReduxProvider store={store}\u003e\n      \u003cQueryClientProvider client={queryClient}\u003e\n        \u003cSpreadoSetupProvider setup={spreadoSetup}\u003e\n          \u003cdiv\u003e...\u003c/div\u003e\n        \u003c/SpreadoSetupProvider\u003e\n      \u003c/QueryClientProvider\u003e\n    \u003c/ReduxProvider\u003e\n  );\n};\n\nhydrate(\u003cApp\u003e, document.getElementById('app'));\n```\n\nAfter that, we set the initial data for all the `useQuery` calls of `react-query` so to have correct statuses of data fetching in the client side:\n\n```diff\nimport {useSpreadIn, useSpreadOut} from 'spreado';\n+import {useQueryInitialData} from 'spreado/for-redux-react-query';\n\nconst INDEX_OF_SOME_DATA_QUERY = 'INDEX_OF_SOME_DATA_QUERY';\n\nfunction useSomeDataQuerySpreadOut(params: ParamsForSomeDataQuery) {\n  return useSpreadOut(\n    INDEX_OF_SOME_DATA_QUERY,\n-    useQuery([INDEX_OF_SOME_DATA_QUERY, params], () =\u003e fetch_some_data_with_params(params))\n+    useQuery([INDEX_OF_SOME_DATA_QUERY, params], () =\u003e fetch_some_data_with_params(params), {\n+      initialData: useQueryInitialData(INDEX_OF_SOME_DATA_QUERY)\n+    })\n  );\n}\n```\n\nIf the client side is a regualr browser, the page will have a same look as its server side rendered html content at its initial rendering, then it will refetch the latest data immediately afterwards without entering loading states. If the client side is a web crawler with JavaScript disabled, the page just remains its server side rendered html content.\n\nIn case of using `mobx` and `swr`, similarly, you can prepare the `store` by `SpreadoMobXStore`, `createSpreadoMobXPreloadedState`, `renderSwrResponse` and set the fallback data for all the `useSWR` calls by `useSwrFallbackData`.\n\nFor more details on available SSR helpers, see also:\n\n- [src/react-query/ssrHelpers](https://github.com/react-easier/spreado/blob/main/src/react-query/ssrHelpers.ts)\n- [src/swr/ssrHelpers](https://github.com/react-easier/spreado/blob/main/src/swr/ssrHelpers.ts)\n- [src/redux/ssrHelpers](https://github.com/react-easier/spreado/blob/main/src/redux/ssrHelpers.ts)\n- [src/mobx/ssrHelpers](https://github.com/react-easier/spreado/blob/main/src/mobx/ssrHelpers.ts)\n\n## API\n\nHere are full descriptions for core APIs of spreado. Please have a look as needed:\n\n### useSpreadOut\n\n```ts\nuseSpreadOut\u003cT\u003e(index: unknown, value: T): T;\n```\n\nThe `useSpreadOut` is a React hook that spreads the input value by the index. It uses the integrated state managing lib to get the input value stored by the index and returns the newer version of the input value and the stored value. When the input value changes, the returned value and the stored value will change in a consistent and timely manner. When all `useSpreadOut` calls on the same index get unmounted, the stored value will be cleared alongside.\n\n### useSpreadIn\n\n```ts\nuseSpreadIn\u003cT\u003e(index: unknown): T | undefined;\nuseSpreadIn\u003cT\u003e(index: unknown, fallback: Partial\u003cT\u003e): T | Partial\u003cT\u003e;\nuseSpreadIn\u003cT\u003e(index: unknown, fallback?: Partial\u003cT\u003e): T | Partial\u003cT\u003e | undefined;\n```\n\nThe `useSpreadIn` is a React hook that reads the spread value by the index. It uses the integrated state managing lib to retrieve the stored value by the index. The stored value is returned if it's retrieved. Otherwise, `undefined` is returned. When the second param is given, this param will be returned as a fallback for the `undefined` case. When the stored value changes, the returned value will change timely.\n\n### setSpreadOut\n\n```ts\nsetSpreadOut\u003cT\u003e(index: unknown, value: T): T;\nsetSpreadOut\u003cT\u003e(index: unknown, callback: (value?: T) =\u003e T): T;\n```\n\nThe `setSpreadOut` is a non-hook version of `useSpreadOut` that spreads the input value by the index. The only difference is, when the second param is a function, this param is used as a callback to accept the stored value from the integrated state managing lib and produce a new value to spread.\n\n### getSpreadIn\n\n```ts\ngetSpreadIn\u003cT\u003e(index: unknown): T | undefined;\ngetSpreadIn\u003cT\u003e(index: unknown, fallback: Partial\u003cT\u003e): T | Partial\u003cT\u003e;\ngetSpreadIn\u003cT\u003e(index: unknown, fallback?: Partial\u003cT\u003e): T | Partial\u003cT\u003e | undefined;\n```\n\nThe `getSpreadIn` is a non-hook version of `useSpreadIn` that reads the spread value by the index. No more difference.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/licg9999\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/8203034?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eChungen Li\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/react-easier/spreado/commits?author=licg9999\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/react-easier/spreado/commits?author=licg9999\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#maintenance-licg9999\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"https://github.com/react-easier/spreado/pulls?q=is%3Apr+reviewed-by%3Alicg9999\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/linyongping\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/13087561?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eYongping Lin\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/react-easier/spreado/commits?author=linyongping\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ishanyang\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/31538059?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDonghua Zhang\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/react-easier/spreado/commits?author=ishanyang\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/humordancer\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/34059032?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eWeiQi Huang\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/react-easier/spreado/commits?author=humordancer\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.jianshu.com/u/befa68b81f92\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/18299850?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLe Gao\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/react-easier/spreado/commits?author=preservance717\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/supfree\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/18379566?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJian Liu\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/react-easier/spreado/commits?author=supfree\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/jokyme\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/8001736?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJian Zhu\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/react-easier/spreado/commits?author=jokyme\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://sswang.zone/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/66862408?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSongsong Wang\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/react-easier/spreado/commits?author=sswang1991220\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/struggle-lulu\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/16461065?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLu Lu\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/react-easier/spreado/commits?author=struggle-lulu\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Evan-Leee\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/13001056?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eYu Li\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/react-easier/spreado/commits?author=Evan-Leee\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-easier%2Fspreado","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-easier%2Fspreado","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-easier%2Fspreado/lists"}