wix-style-react/src/ColorPicker/docs/ColorPicker.demo.js

wix-style-react

import React from 'react';
import ColorPicker from '..';
import Swatches from '../../Swatches';

export default () => {
  const [value, setValue] = React.useState('#3899EC');

  return (
    <ColorPicker
      value={value}
      onChange={color => setValue(color.hex())}
      onCancel={setValue}
    >
      {({ changeColor }) => (
        <>
          <Swatches
            colors={[
              '#2bc759',
              '#5ecbff',
              '#5bafff',
              '#97d0b5',
              '#af8ed1',
              '#fce3d9',
              '#ff0165',
              '#006aff',
            ]}
            onClick={_color => {
              changeColor(_color);
            }}
          />
        </>
      )}
    </ColorPicker>
  );
};