Color Swatch documentation is wrong, EDIT: not wrong, just easy to get wrong #194
Description
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.