Color Swatch documentation is wrong, EDIT: not wrong, just easy to get wrong

[kzroo]

https://uiwjs.github.io/react-color/#/swatch

This usage code example:

import React, { useState } from 'react';
import { hsvaToHex, getContrastingColor, } from '@uiw/color-convert';
import Swatch from '@uiw/react-color-swatch';

function Point(props: { color?: string; checked?: boolean }) {
  if (!props.checked) return null;
  return (
    <div
      style={{
        height: 5,
        width: 5,
        borderRadius: '50%',
        backgroundColor: getContrastingColor(props.color!),
      }}
    />
  );
}

function Demo() {
  const [hex, setHex] = useState("#fff");
  return (
    <Swatch
      colors={[ '#F44E3B', '#FE9200', '#FCDC00', '#DBDF00' ]}
      color={hex}
      rectProps={{
        children: <Point />,
        style: {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        },
      }}
      onChange={(hsvColor) => {
        setHex(hsvaToHex(hsvColor))
      }}
    />
  );
}

export default Demo;

doesn't actually work. rectProps doesn't use the children key, at all... In order to render the circle on a selected color, I had to do this (rectRender and renderProps instead):

        <ColorSwatch
            color={color}
            colors={['#000000', '#ffffff', '#ff2056', '#e12afb', '#8e51ff',
                '#2b7fff', '#00b8db', '#00bc7d', '#5ea500', '#ff8904',
                '#fb64b6', '#00bcff', '#00d5be', '#9ae600', '#ffdf20']}
            onChange={onChange}
            rectRender={(renderProps) => (
                <div
                    {...renderProps}
                    style={{
                        ...renderProps.style,
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        backgroundColor: renderProps.color,
                    }}
                >
                    <ColorPickerPoint color={renderProps.color} checked={renderProps.checked} />
                </div>
            )}
....................................

EDIT:

I realized i had the wrong import statement. Instead of ColorSwatch, if you import Swatch, the usage example works perfectly fine... why is there a ColorSwatch import??? What's the difference? rectProps like the way the usage example shows does not work on the ColorSwatch component from the same package... weird.

[jaywcjlove]

https://github.com/uiwjs/react-color/blob/629b1d3e7e3ee275c2700045377140a387ba7dc4/packages/color/src/index.tsx#L26

https://github.com/uiwjs/react-color/blob/629b1d3e7e3ee275c2700045377140a387ba7dc4/packages/color-swatch/README.md?plain=1#L101

https://github.com/uiwjs/react-color/blob/629b1d3e7e3ee275c2700045377140a387ba7dc4/packages/color-swatch/src/index.tsx#L117-L119

@kzroo I couldn’t find a component named ColorSwatch in the library.

[kzroo]

react-color/packages/color/src/index.tsx

Line 26 in 629b1d3

export { default as Swatch, type SwatchProps, type SwatchPresetColor, type SwatchRectRenderProps } from '@uiw/react-color-swatch'; react-color/packages/color-swatch/README.md

Line 101 in 629b1d3

import Swatch from '@uiw/react-color-swatch'; react-color/packages/color-swatch/src/index.tsx

Lines 117 to 119 in 629b1d3

Swatch.displayName = 'Swatch';

export default Swatch; @kzroo I couldn’t find a component named ColorSwatch in the library.

Man props to you for your activity and timeliness, i really gotta give you some respect.

Look: