Color Utils
Single select
"#00A76F"
import { ColorPicker } from 'src/components/color-utils';
const COLOR_OPTIONS = ['#00A76F', '#8E33FF', '#00B8D9', '#22C55E', '#FFAB00', '#FF5630', '#78070A', '#5119B7'];
export function App() {
const [selected, setSelected] = useState(COLOR_OPTIONS[0]);
const onSelected = useCallback((inputValue) => {
setSelected(inputValue);
}, []);
return <ColorPicker selected={selected} onSelectColor={onSelected} colors={COLOR_OPTIONS} />;
}
Multi select
[
"#8E33FF",
"#00B8D9"
]
import { ColorPicker } from 'src/components/color-utils';
const COLOR_OPTIONS = ['#00A76F', '#8E33FF', '#00B8D9', '#22C55E', '#FFAB00', '#FF5630', '#78070A', '#5119B7'];
export function App() {
const [selected, setSelected] = useState(COLOR_OPTIONS.slice(1, 3));
const onSelected = useCallback((inputValue) => {
setSelected(inputValue);
}, []);
return <ColorPicker selected={selected} onSelectColor={onSelected} colors={COLOR_OPTIONS} />;
}
Color Preview
+5+2
import { ColorPreview } from 'src/components/color-utils';
const COLOR_OPTIONS = ['#FC5B25', '#8E33FF', '#00B8D9', '#22C55E', '#FFAB00', '#FF5630', '#78070A', '#5119B7'];
export function App() {
return (
<>
<ColorPreview colors={COLOR_OPTIONS.slice(0, 2)} />
<ColorPreview colors={COLOR_OPTIONS} />
<ColorPreview colors={COLOR_OPTIONS} limit={6} />
</>
);
}
Related files:
src/components/color-utils