Null/undefined color value

[Nosferatu31]

Could Swatches support a null color swatch to unset the color?

[Nosferatu31]

@jaywcjlove would it be against the library standard to support nullish values for the several packages? e,g,; Saturation, HueSlider, EditableInputs, Swatches, et cetera.

[jaywcjlove]

@Nosferatu31 like this?

<Saturation
+    hsva={null}
 />

[Nosferatu31]

@Nosferatu31 like this?

<Saturation
+    hsva={null}
 />

Exactly

[Nosferatu31]

Thank you for the new <Saturation> upgrade. Is it planned to do the same for other components? (e,g,; HueSlider, EditableInputs, Swatches, et cetera.)

[jaywcjlove]

<Hue hue={undefined/null} />

@Nosferatu31 The Hue component supports passing undefined/null values, but the default value is 0. I don’t know what display you need to do after you want to pass a null value.

[jaywcjlove]

https://github.com/uiwjs/react-color/blob/1cece0fc35e8eb4d3a8e6e78966caf7bd573555b/packages/color-hue/src/index.tsx#L6

@Nosferatu31 I adjusted the hue Typescript type to be optional.

[akwasin]

I currently have an extra (x) button that sets the color to null. Is it possible to get this type of button inside the the swatches? like an x or something similar? Lets say that the last square in the github or compact style had an x inside it.

[jaywcjlove]

@akwasin Upgrade v2.0.1

Add clear button

import React, { useState } from 'react';
import Github from '@uiw/react-color-github';

export default function Demo() {
  const [hex, setHex] = useState("#fff");
  return (
    <>
      <Github
        color={hex}
        style={{
          '--github-background-color': '#d1eff9'
        }}
        onChange={(color) => {
          setHex(color.hex);
        }}
        rectRender={(props) => {
          if (props.key == 15) {
            return <button key={props.key} onClick={() => setHex(null)}>x</button>
          }
        }}
      />
      <div style={{ width: 120, height: 50, backgroundColor: hex }} />
    </>
  );
}

[akwasin]

rectRender only exists on Github style? was hoping that this was a universal thing. Im using Compact as well.

[jaywcjlove]

@akwasin Upgrade v2.0.2