Wondermarin/react-color-palette

Just thanks

snowinmars opened this issue · 1 comments

Well, that's not an issue. I just surprised that the only picker that can handle css variables has zero stars on github. React-color fails, at least in my hands.

PoC:

// Store.ts
const getCssValue = (key: string): string => {
  return window
    .getComputedStyle(document.documentElement)
    .getPropertyValue(`--${key}`);
};

const setCssValue = (key: string, value: string) => {
  document
    .documentElement.style.setProperty(`--${key}`, value);
};
// Component.ts
function Main() {
 const [color, setColor] = useColorObject('hex', Store.getCssValue('my-color')); // references to var(--my-color)

 return <ColorPicker
       width={200}
       color={color}
       onChange={(e) => {
         setColor(e);
         Store.setCssValue('my-color', e.hex);
       }}
     />
}

Thank you for your kind words.