use-react-ref
v1.0.4
Published
Intention-Revealing Extensions to State Management in React & React Native
Downloads
690
Readme
use-react-ref
Intention-Revealing Extensions to State Management in React & React Native
Install
yarn
yarn add use-react-ref
npm
npm install use-react-ref
Usage
import { useReactState } from 'use-react-ref';
function SayHelloOnThirdClick() {
const counter = useReactState(0);
if (counter.isEqual(3))
return (
<>
<p>Hello!</p>
<button onClick={counter.reset}>Reset Counter</button>
</>
);
return (
<>
<p>{`Counter: ${counter.value}`}</p>
<button onClick={() => counter.set(x => x + 1)}>Click me</button>
</>
);
}
Documentation
useReactRef
Thin wrapper around useRef. Creates a ReactRef
of the initialValue
passed in.
Parameters
- initialValue: Initial Value of
ReactRef
Returns
ReactRef
object that has the following properties
get()
: returns current value of the Ref.set(newValue)
: updates the current value of the Ref to the newValue.reset()
: resets the current value to theinitialValue
passed in.isInitialValue()
: returnstrue
if current value is theinitialValue
passed in.false
otherwise.isEqual(otherValue)
: returnstrue
if current value is equal tootherValue
.false
otherwise.ref
: underlyinguseRef
return valueMutableRefObject
.
You should only use .ref
if another library needs the MutableRefObject
.
useReactState
Thin wrapper around useState. Creates a ReactState
of the initialValue
passed in.
Parameters
- initialValue: Initial Value of the
ReactState
Returns
ReactState
object that has the following properties
value
: currentValue of theReactState
.set(newValue)
: updates the state on next render to thenewValue
and triggers a rerender.reset()
: resets the value on next render to theinitialValue
passed in and triggers a rerender.isInitialValue()
: returnstrue
if value is theinitialValue
passed in.false
otherwise.isEqual(otherValue)
: returnstrue
if value is equal tootherValue
.false
otherwise.
Testing
We have included createStubReactRef
and createStubReactState
to help with unit tests around components that are
being passed these as props.
To hook it up with a tool like jest. Here is how you would wrap the simple stub provided.
import { createStubReactState } from 'use-react-ref';
export function createSpyReactState<T>(value: T, set: SetValueType<T> = jest.fn()): ReactState<T> {
return createStubReactState(value, set)
}