@mshafiqyajid/react-color-input
Headless color input hook and styled component. Swatch input with picker popover portalled to body. Hex, RGB, HSL formats, preset colors, copy button.
Playground #
Props
TSX
import { ColorInputStyled } from "@mshafiqyajid/react-color-input/styled";
import "@mshafiqyajid/react-color-input/styles.css";
<ColorInputStyled
value={value}
onChange={setValue}
/>Install #
npm install @mshafiqyajid/react-color-inputQuick start #
import { ColorInputStyled } from "@mshafiqyajid/react-color-input/styled";
import "@mshafiqyajid/react-color-input/styles.css";
const [color, setColor] = useState("#6366f1");
<ColorInputStyled
value={color}
onChange={setColor}
format="hex"
showCopyButton
label="Brand color"
/>API #
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Controlled color value |
| defaultValue | string | "#000000" | Uncontrolled initial value |
| onChange | (v) => void | — | Called on change |
| format | "hex" | "rgb" | "hsl" | "hex" | Color format for input/output |
| showCopyButton | boolean | true | Show copy-to-clipboard button |
| label | string | — | Visible label |
| hint | string | — | Helper text below input |
| error | string | — | Error message (overrides hint) |
| size | "sm" | "md" | "lg" | "md" | Input size |
| tone | "neutral" | "primary" | "danger" | "neutral" | Color tone |
| disabled | boolean | false | Disable interaction |
| presets | string[] | (built-in 12 colors) | Custom preset swatches |
| showAlpha | boolean | false | Alpha channel slider |
| eyeDropper | boolean | false | EyeDropper API button (Chrome only) |
| onOpen | () => void | — | Picker open callback |
| onClose | () => void | — | Picker close callback |