shared-hooks
Share hooks across multiple React components with TODO
API
Table of Contents
useShared
Use the given hook with state shared with other React components.
useShared
can only be used in components rendered within a
<SharedHooksProvider>
.
function useCounter(startingNumber) {
return useReducer(n => n + 1, startingNumber)
}
function Counter({ shareKey }) {
const [count, addOne] = useShared(shareKey, useCounter, 1)
return <div onClick={() => addOne()}>Count: {count}</div>
}
<Counter shareKey="a" />
<Counter shareKey="a" />
<Counter shareKey="b" />
<Counter shareKey="b" />
Hooks can be provided as an inline function, however this may cause a rules of hooks linter to fail. If using such a linter, define your custom hooks as their own functions and pass in arguments as illustrated above.
// Using inline custom hooks
function Counter({ shareKey }) {
const [count, addOne] = useShared(shareKey, () =>
useReducer(n => n + 1, 1)
)
return <div onClick={() => addOne()}>Count: {count}</div>
}
Parameters
key
any The shared key to use. All components using this same key will share this hook.hook
function (...args: A): T Any React hook, including both built-in and custom hooks.args
...A The arguments to provide to the hook.
Returns T The provided hook's return value.
SharedHooksProvider
TODO
Parameters
props
{children: ReactNode?}
Returns ReactElement
useLocal
TODO
Parameters
hook
function (...args: A): Targs
...A
Returns T
Shared core React Hooks
The core React hooks can be used as is within useShared
, however
convenience functions are provided for a more TypeScript friendly API.
This documentation also further explains the behavior of each hook when
being shared among many components.
useSharedState
TODO
Parameters
key
anyinitialState
(S | function (): S)
Returns [S, Dispatch<SetStateAction<S>>]
useSharedReducer
TODO
Parameters
key
anyreducer
RinitializerArg
Iinitializer
function (arg: I): ReducerStateWithoutAction<R>
Returns [ReducerStateWithoutAction<R>, DispatchWithoutAction]
useSharedEffect
TODO
Parameters
key
anyeffect
EffectCallbackdeps
DependencyList?
Returns void
useSharedLayoutEffect
TODO
Parameters
key
anyeffect
EffectCallbackdeps
DependencyList?
Returns void
useSharedMemo
TODO
Parameters
key
anyfactory
function (): Tdeps
(DependencyList | undefined)
Returns T
useSharedCallback
TODO
Parameters
key
anycallback
Tdeps
DependencyList
Returns T
useSharedRef
TODO
Parameters
key
anyinitialValue
T
Returns MutableRefObject<T>