color-kitnext

@pbroom/color-kit/reactColor

ColorContext

React context that a Color provider fills with its shared color state; null outside a provider.

constimport { ColorContext } from '@pbroom/color-kit/react';context.ts:35
const ColorContext: Context<UseColorReturn | null>;

Prefer useColorContext to read it: the provider's value is not reactive (children subscribe to its store instead), so reading the context directly only gives a stable store and setters, not live color fields.

Example

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

function ActiveGamutBadge() {
  const context = useContext(ColorContext);
  const gamut = useColorStoreSelector(
    context?.store ?? null,
    (state) => state?.activeGamut ?? null,
  );
  return <span>{gamut ?? 'no provider'}</span>;
}