useColorStoreSelector

function useColorStoreSelector<T>(
  store: ColorStore | null,
  selector: (state: ColorState | null) => T,
): T;

The component rerenders only when the selected value changes. The selector must return a referentially stable value for an unchanged state (primitives or sub-objects of the immutable ColorState), because snapshots are compared with Object.is between renders. With a null store the selector receives null and nothing is subscribed.

Parameters

storeColorStore | null

The store to read, or null (e.g. outside a provider).

selector(state: ColorState | null) => T

Maps the state (or null) to the slice to return.

Returns

TThe selected slice.

Example

import { useContext } from 'react';
import { ColorContext, useColorStoreSelector } from '@pbroom/color-kit/react';

function HueLabel() {
  const context = useContext(ColorContext);
  const hue = useColorStoreSelector(
    context?.store ?? null,
    (state) => state?.requested.h ?? null,
  );
  return <span>{hue === null ? '–' : `${Math.round(hue)}°`}</span>;
}

See also