Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pedronasser/resynced
An experimental hook that lets you have multiple components using multiple synced states using no context provider
https://github.com/pedronasser/resynced
hooks react react-hooks redux state-management
Last synced: about 2 months ago
JSON representation
An experimental hook that lets you have multiple components using multiple synced states using no context provider
- Host: GitHub
- URL: https://github.com/pedronasser/resynced
- Owner: pedronasser
- License: mit
- Archived: true
- Created: 2018-11-02T00:49:49.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-03-03T19:33:42.000Z (almost 6 years ago)
- Last Synced: 2024-08-01T02:25:26.673Z (4 months ago)
- Topics: hooks, react, react-hooks, redux, state-management
- Language: TypeScript
- Homepage:
- Size: 136 KB
- Stars: 18
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-react-hooks - `resynced`
- awesome-react-hooks-cn - `resynced`
- awesome-react-hooks - `resynced`
- awesome-react-hooks - `resynced`
README
# Resynced (experimental)
## ❤️ Motivation
This is an experimental hook that lets you have **multiple components** using **multiple synced states** using **no context provider**.
And also provide a way of using that synced state with [Redux](https://redux.js.org/)!
**This package requires the Hooks API available only in React 16.7.0-alpha.0 or later.**
## 💻 Example
- [Simple Example](https://codesandbox.io/s/3yyr3w7zym)
- [Resynced With Redux](https://codesandbox.io/s/1yx3n0nz7q)
## 🔧 Install
```bash
$ yarn add resynced
```
## 🚀 How to Use
```jsx
import { createSynced } from 'resynced'
const initialState = "John"
const [useSyncedState] = createSynced(initialState)
const UsingSharedState = () => {
const [name, setName] = useSyncedState()
return (
My name is {name}
setName("Jorge")}>Change Name
)
}
```
### Using with Redux
Let's first setup our synced redux store (you must have redux installed in your project)
```js
import { createSyncedRedux } from "resynced"
import { createStore } from "redux"
const initialState = {
authenticated: false
}
const reducer = (state = initialState, action) => {
switch (action.type) {
case "LOGIN":
return { ...state, authenticated: true }
case "LOGOUT":
return { ...state, authenticated: false }
default:
return state
}
}
const authStore = createStore(reducer)
const [useSyncedAuth] = createSyncedRedux(authStore)
export default useSyncedAuth
```
Now we can use that synced redux in any component without the need of adding a Context Provider anywhere.
```js
import React from 'react'
import useAuth from './authStore'
const ComponentUsingAuth = React.memo(() => {
// This component will only update when the 'authenticated'
// property is updated
const [{ authenticated }, dispatch] = useAuth(["authenticated"])
return (
Authenticated? {authenticated ? "Yes" : "No"}
dispatch({ type: "LOGIN" })}>Login
dispatch({ type: "LOGOUT" })}>Logout
)
})
export ComponentUsingAuth
```
You can check this working example here: [Resynced With Redux](https://codesandbox.io/s/1yx3n0nz7q)
### Conditional updates
#### Using a list of properties
The component local state will only be synced if any of the given properties of the state object changes (only works with object states).
```js
import { createSynced } from 'resynced'
const initialState = {
name: "John"
}
const [useSyncedState] = createSynced(initialState)
const UsingSharedState = () => {
const [state, setState] = useSyncedState(["name"])
return (
My name is {name}
setState({ name: "Jorge" })}>Change Name
)
}
```
#### Using functions
The component local state will only be synced if the return of the given function is **true**.
```js
import { createSynced } from 'resynced'
const [useSyncedState] = createSynced("John")
const UsingSharedState = () => {
const [name, setName] = useSyncedState((newState, prevState) => {
return newState !== "Foo"
})
return (
My name is {name}
setName("Jorge")}>Change Name
)
}
```