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

wix-style-react

import React from 'react';
import Swatches from '..';
import { FormField } from '../..';
import Box from '../../Box';

export default () => {
  const [value, setValue] = React.useState(null);
  const [colors, setColors] = React.useState([
    '#3370fb',
    '#7852d2',
    '#17b0e2',
    '#c53e99',
    '#fdb10c',
    '#3d9fa1',
  ]);

  return (
    <FormField label="Color" required>
      <Box>
        <Swatches
          showClear
          showAddButton
          showClearMessage="Clear Color"
          addButtonMessage="New Color"
          onAdd={color => setColors([...colors, color])}
          selected={value}
          onClick={setValue}
          colors={colors}
        />
      </Box>
    </FormField>
  );
};