Skip to content

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 in ColorPicker.Colors for default colors, and in PaletteManager for customizable colors that can be added or removed.
  • The second method is to use ColorPicker.Item and PaletteManager.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;

Released under the MIT License.

Released under the MIT License.