React Hooks by Chris Drifte

Installation

npm install --save @drfte/react-hooks

About

A series of React hooks with consistent code patterns.

Getting/setting values

Hooks which get and set values follow this structure:

// setup
const [currentHookValue, setHookValue] = useHook();

// update
setHookValue(newHookValue);

When multiple values are tracked, destructuring is used to both get and set:

// setup
const [{ var1, var2 }, setHookValue] = useHook();

// update
setHookValue({ var1: newVar1Value, var2: newVar2Value });

Hooks which measure elements

Hooks that measure elements always receive a ref as the first argument:

const MeasurableElement = () => {
  const elementRef = useRef(null);
  const [measuredValue, setValue] = useHook(elementRef);

  return <div ref={elementRef} />;
};

Hooks which can be cancelled

When a hook has a future effect that can be cancelled, it returns a helper function which does just that:

const cancelHook = useHook();

Hooks which wrap functions

When a hook wraps an existing function, such as setTimeout, it will have the same parameters.

const cancelTimeout = useTimeout(fn, delay);

If the existing function would normally be called on a target object, such as element.addEventListener, the first parameter is a ref with the target, and identical parameters follow.

const clearEvent = useEvent(ref, eventType, listener, options);