useColorContext
Returns the nearest Color provider's state as a live UseColorReturn snapshot (requested/displayed colors, conversions and setters).
import { useColorContext } from '@pbroom/color-kit/react';context.ts:100function useColorContext(): UseColorReturn;This hook intentionally subscribes to the complete ColorState because it returns a complete snapshot: any state update rerenders the consumer. Components that only need a slice should use useColorStoreSelector on the context's store instead.
Returns
UseColorReturnThe provider's color state and setters.
Throws
- When called outside a
<Color>provider.
Example
import { Color, useColorContext } from '@pbroom/color-kit/react';
function Swatch() {
const { displayedCss, setChannel } = useColorContext();
return (
<button
style={{ background: displayedCss() }}
onClick={() => setChannel('h', 30)}
/>
);
}
export const Picker = () => (
<Color defaultColor="#3b82f6">
<Swatch />
</Color>
);