ColorPicker
PaletteManager
PaletteManager lets you add your own colors by typing in the hexadecimal code and clicking the check icon or pressing Enter. To remove custom colors, simply click the Close
icon on each item.
tsx
import React from 'react';
import ColorPicker, { PaletteManager } from 'intergalactic/color-picker';
import { Text } from 'intergalactic/typography';
import { Flex } from 'intergalactic/flex-box';
const Demo = () => {
return (
<Flex direction='column'>
<Text tag='label' size={200} htmlFor='main-theme-color'>
Main theme color
</Text>
<ColorPicker>
<ColorPicker.Trigger mt={2} id='main-theme-color' />
<ColorPicker.Popper>
<ColorPicker.Colors />
<PaletteManager>
<PaletteManager.Colors />
<PaletteManager.InputColor />
</PaletteManager>
</ColorPicker.Popper>
</ColorPicker>
</Flex>
);
};
export default Demo;
Input validation
To prevent users from entering white as a color option, replace the default validation function in PaletteManager.InputColor
with your own custom validation function using the onChange
prop. Here is an example:
tsx
import React from 'react';
import ColorPicker, { PaletteManager } from 'intergalactic/color-picker';
import { Text } from 'intergalactic/typography';
import { Flex } from 'intergalactic/flex-box';
const Demo = () => {
const [state, setState] = React.useState<'normal' | 'invalid'>('normal');
const onChange = (value) => {
if (value.toLowerCase() === 'ffffff') {
setState('invalid');
}
return false;
};
return (
<Flex direction='column'>
<Text tag='label' size={200} htmlFor='t-shirt-color'>
T-shirt color
</Text>
<ColorPicker>
<ColorPicker.Trigger mt={2} id='t-shirt-color' />
<ColorPicker.Popper>
<ColorPicker.Colors />
<PaletteManager>
<PaletteManager.Colors />
<PaletteManager.InputColor state={state} onChange={onChange} />
</PaletteManager>
</ColorPicker.Popper>
</ColorPicker>
</Flex>
);
};
export default Demo;
Custom trigger
You have complete control over the appearance of ColorPicker, including the trigger.
tsx
import React from 'react';
import ColorPicker from 'intergalactic/color-picker';
import Input from 'intergalactic/input';
import { Flex, Box } from 'intergalactic/flex-box';
import { Text } from 'intergalactic/typography';
const Demo = () => {
const [value, setValue] = React.useState('#C695FF');
return (
<Flex gap={5} direction='column'>
<Flex direction='column'>
<Text tag='label' size={200} htmlFor='new-tag'>
New tag
</Text>
<ColorPicker value={value} onChange={setValue}>
<Input ml={1} w={300} mt={2}>
<ColorPicker.Trigger tag={Input.Addon} interactive aria-label='New tag color'>
<div
style={{
width: '16px',
height: '16px',
borderRadius: '50%',
border: '1px solid var(--intergalactic-border-secondary)',
backgroundColor: value,
}}
/>
</ColorPicker.Trigger>
<Input.Value placeholder='Tag name' id='new-tag' />
</Input>
<ColorPicker.Popper>
<ColorPicker.Colors />
</ColorPicker.Popper>
</ColorPicker>
</Flex>
<Flex direction='column'>
<Text tag='label' size={300} htmlFor='new-tag'>
New tag
</Text>
<ColorPicker value={value} onChange={setValue}>
<Input ml={1} w={300} mt={2} size='l'>
<ColorPicker.Trigger tag={Input.Addon} interactive aria-label='New tag color'>
<div
style={{
width: '16px',
height: '16px',
borderRadius: '50%',
border: '1px solid var(--intergalactic-border-secondary)',
backgroundColor: value,
}}
/>
</ColorPicker.Trigger>
<Input.Value placeholder='Tag name' id='new-tag' />
</Input>
<ColorPicker.Popper>
<ColorPicker.Colors />
</ColorPicker.Popper>
</ColorPicker>
</Flex>
</Flex>
);
};
export default Demo;
Several ways to use component
There are multiple ways to add colors in ColorPicker;
- The first method is to use the
colors
prop inColorPicker.Colors
for default colors, and inPaletteManager
for customizable colors that can be added or removed. - The second method is to use
ColorPicker.Item
andPaletteManager.Item
, which allows for the use of custom components instead of default items. The next two examples are identical.
tsx
import React from 'react';
import ColorPicker, { PaletteManager } from 'intergalactic/color-picker';
import { Text } from 'intergalactic/typography';
import { Flex } from 'intergalactic/flex-box';
const Demo = () => {
const [value, setValue] = React.useState('#98848D');
const [customColors, setCustomColors] = React.useState(['#8649E6', '#8649E7', '#8649E8']);
return (
<Flex gap={5} flexWrap>
<Flex direction='column'>
<Text tag='label' size={200} htmlFor='player-1-color'>
Color 1
</Text>
<ColorPicker value={value} onChange={setValue}>
<ColorPicker.Trigger mt={2} id='player-1-color' />
<ColorPicker.Popper>
<ColorPicker.Colors
colors={[
null,
'#8649E1',
'#FF5733',
'#98848D',
'#8E3B29',
'#B0E727',
'#27D3E7',
'#2D747C',
'#6ad0de',
'#6E2D7C',
]}
/>
<PaletteManager colors={customColors} onColorsChange={setCustomColors}>
<PaletteManager.Colors />
<PaletteManager.InputColor />
</PaletteManager>
</ColorPicker.Popper>
</ColorPicker>
</Flex>
<Flex direction='column'>
<Text tag='label' size={200} htmlFor='player-2-color'>
Color 2
</Text>
<ColorPicker value={value} onChange={setValue}>
<ColorPicker.Trigger mt={2} id='player-2-color' />
<ColorPicker.Popper>
<ColorPicker.Colors>
<ColorPicker.Item value={null} />
<ColorPicker.Item value='#8649E1' />
<ColorPicker.Item value='#FF5733' />
<ColorPicker.Item value='#98848D' />
<ColorPicker.Item value='#8E3B29' />
<ColorPicker.Item value='#B0E727' />
<ColorPicker.Item value='#27D3E7' />
<ColorPicker.Item value='#2D747C' />
<ColorPicker.Item value='#6ad0de' />
<ColorPicker.Item value='#6E2D7C' />
</ColorPicker.Colors>
<PaletteManager onColorsChange={setCustomColors}>
<PaletteManager.Colors>
{customColors.map((color) => (
<PaletteManager.Item value={color} key={color} />
))}
</PaletteManager.Colors>
<PaletteManager.InputColor />
</PaletteManager>
</ColorPicker.Popper>
</ColorPicker>
</Flex>
</Flex>
);
};
export default Demo;