@printy/react-tab-state
v2.2.2
Published
Sync and persist state across tabs in React
Downloads
9
Readme
React Tab State
Overview
This is a small React library that allows you to sync state between tabs by using the SharedWorker API.
Setup
To install this package, simply run npm i @printy/react-tab-state
Usage
Simply import and use the useTabState()
hook just like you would use a normal
useState()
hook. Just like useState()
, useTabState()
returns an array with
two variables - one for the state and the other for setting state.
Example
import useTabState from '@printy/react-tab-state'
function MyComponent() {
const [counter, setCounter] = useTabState(0, 'counter')
return (
<button
onClick={() => setCounter(counter + 1)}
>
{counter}
</button>
)
}
API
useTabState<T>(initial_state: T, id: string)
This is the main hook of the library that you can use to create state that is synced across tabs
Params
initial_state - The initial state
id - A unique id used to identify the BroadcastChannel
Return value
Returns an array with the state and the setState function, just like a regular
setState()
hook.
Support
For any questions or issues feel free to submit an issue or email me at [email protected]