use-react-ref

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 the initialValue passed in.
• isInitialValue(): returns true if current value is the initialValue passed in. false otherwise.
• isEqual(otherValue): returns true if current value is equal to otherValue. false otherwise.
• ref: underlying useRef return value MutableRefObject.

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 the ReactState.
• set(newValue): updates the state on next render to the newValue and triggers a rerender.
• reset(): resets the value on next render to the initialValue passed in and triggers a rerender.
• isInitialValue(): returns true if value is the initialValue passed in. false otherwise.
• isEqual(otherValue): returns true if value is equal to otherValue. 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)
}