@mshafiqyajid/react-color-input

Full docs →

A headless color input hook and styled component for React. Provides a text input combined with a color swatch that opens a popover picker — hue slider, gradient canvas, hex input, and preset swatches.

Installation

npm install @mshafiqyajid/react-color-input

Usage

Styled component (quick start)

import { ColorInputStyled } from "@mshafiqyajid/react-color-input/styled";
import "@mshafiqyajid/react-color-input/styles.css";

function App() {
  const [color, setColor] = useState("#6366f1");
  return (
    <ColorInputStyled
      value={color}
      onChange={setColor}
      label="Brand color"
      size="md"
      tone="neutral"
    />
  );
}

Headless hook

import { useColorInput } from "@mshafiqyajid/react-color-input";

function MyColorInput() {
  const { inputProps, swatchProps, isOpen, isValid } = useColorInput({
    defaultValue: "#6366f1",
    onChange: (hex) => console.log(hex),
  });

  return (
    <div>
      <button {...swatchProps} style={{ background: inputProps.value }} />
      <input {...inputProps} />
      {!isValid && <span>Invalid hex</span>}
      {isOpen && <div>Picker goes here</div>}
    </div>
  );
}

Props — ColorInputStyled

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | — | Controlled hex value | | defaultValue | string | "#000000" | Uncontrolled default | | onChange | (value: string) => void | — | Called with valid hex on change | | disabled | boolean | false | Disables the input | | size | "sm" \| "md" \| "lg" | "md" | Input size | | tone | "neutral" \| "primary" \| "danger" | "neutral" | Visual tone | | label | string | — | Label above the input | | hint | string | — | Helper text below | | error | string | — | Error message (sets danger tone) | | format | "hex" \| "rgb" \| "hsl" | "hex" | Display format in text input | | showCopyButton | boolean | false | Show copy-to-clipboard button | | showAlpha | boolean | false | Alpha channel slider in popover | | presets | string[] | (12 built-in) | Custom preset swatches | | recentColors | string[] | — | Recently-used colors row above presets | | onRecentColorsChange | (colors) => void | — | Fires with the deduped+capped list when a color is committed | | recentColorsLimit | number | 12 | Max recents tracked before older entries drop | | eyeDropper | boolean | false | EyeDropper API button (Chrome only) |

Dark mode

Add data-theme="dark" to any ancestor element.

License

MIT