Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aegatlin/react-flat-store
react-flat-store is a strongly-typed state management utility ideally suited for simple state management needs in React
https://github.com/aegatlin/react-flat-store
hooks javascript nodejs npm npm-package react react-hooks state state-management typescript
Last synced: 23 days ago
JSON representation
react-flat-store is a strongly-typed state management utility ideally suited for simple state management needs in React
- Host: GitHub
- URL: https://github.com/aegatlin/react-flat-store
- Owner: aegatlin
- License: mit
- Created: 2022-08-12T00:47:43.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-10-11T06:47:13.000Z (over 2 years ago)
- Last Synced: 2024-12-18T17:52:12.260Z (about 2 months ago)
- Topics: hooks, javascript, nodejs, npm, npm-package, react, react-hooks, state, state-management, typescript
- Language: TypeScript
- Homepage:
- Size: 62.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Flat Store
React Flat Store is a strongly-typed state management utility ideally suited for "flat" data. There is a simple `useStore` API for component state management, and a `createContextStore` API for multi-component state management using React Contexts.
```sh
npm install react-flat-store
```
```js
// Simple use case
import { useStore } from 'react-flat-store'
function SimpleCounter() {
const {
state: { counter },
update,
} = useStore({ counter: 0 })
const inc = () => update('counter', counter + 1)
const dec = () => update('counter', counter - 1)
return (
Increment
Decrement
{counter}
)
}
```
```js
// Context-based use case
import { createContextStore } from 'react-flat-store'
const { Store, useStore, useKey } = createContextStore({ counter: 0 })
const useCounter = () => useKey('counter')
function ContextCounter() {
return (
)
}
function Increment() {
const { value, update } = useCounter()
return update(value + 1)}>Increment
}
function Decrement() {
const { value, update } = useCounter()
return update(value - 1)}>Decrement
}
function Counter() {
const { value } = useCounter()
return {value}
}
function Submit() {
const { state } = useStore()
const submit = () => console.log(state)
return Submit
}
```
## Tutorials
- [Create a simple sign in form in a single component using `useStore`](./tests/tutorials/singInFormSingleComponent.tsx)
- [Create a simple sign in form across multiple component using `useContextStore`](./tests/tutorials/signInFormMutipleComponents.tsx)
- [Create a theme manager](./tests/tutorials/theme.tsx)
## How To
- [Create bespoke hooks](./tests/howTo/bespokeHooks.tsx)
- [Create generic hooks](./tests/howTo/genericHooks.tsx)
- [Work with types and nested data](./tests/howTo/nestedData.tsx)
## Reference
### useStore
- Input: initial state
- Output: An object containing `state`, `set`, and `update`
```js
function Component() {
const { state, set, update } = useStore({ a: 1, b: '2' })
}
```
`state` is the current state.
`set` is a function that overwrites the entire state: `set(newState)`
`update` is a function that updates a particular key: `update(key, newValue)`
### createContextStore
- Input: initial state
- Output: An object containing `Store`, `useStore`, and `useKey`
```ts
const { Store, useStore, useKey } = createContextStore({
a: 1,
b: '2',
c: { three: 3 },
})
```
#### Store
`Store` is a React component that provides state context. There are no required props and one optional prop, `state`. It is recommended to supply the state when you call `createContextStore`, but you might not know the initial values until a runtime fetch, in which case you can provide the `state` inline.
```tsx
function Parent({ children }) {
return {children}
}
```
```tsx
function Parent({ children }) {
const [payload, setPayload] = useState({ a: 0, b: '', c: { three: 0 } })
useEffect(() => {
const getData = async () => {
const newPayload = await Promise.resolve({
a: 1,
b: '2',
c: { three: 3 },
})
setPayload(newPayload)
}
getData()
}, [])
return {children}
}
```
#### useStore
`useStore` is a React hook that behaves identically to the context-less `useStore` API listed above. It returns `state`, `set`, and `update`. There are no inputs.
#### useKey
- Input: `key: string`. The key name.
- Outputs:
- `key: string`: The key name.
- `value: State[Key]`: The key's value. Strongly typed.
- `update: (key: string, newValue: State[Key]) => void`: An update function which updates the key's value to a new value. Strongly typed. No output.
```tsx
const { Store, useStore, useKey } = createContextStore({ a: 1 })
function Child() {
const { key, value, update } = useKey('a')
console.log(key, value) // initially => 'a', 1
update(2) // eventually => 'a', 2
}
```