在 React JS 中使用 `rgb-hex` 库作为输入时，将十六进制 3 位转换为 6 位？

Question

I am using react-colorful & using it's <HexColorInput /> component as:

<HexColorInput
    className="w-12 text-blue-gray-500"
    color={rgb2hex(selectedColor.rgba)}
    onChange={(hex: string) => {
        updateBackground({
            selectedColor: {
                ...selectedColor,
                rgba: hex2rgb(hex),
            },
        })
    }}
/>

The color prop acts similar to value prop on input . And onChange handler changes as you type in an input.

The problem right now is when I make the hex input to be 3-digits, it automatically converts it to 6-digits as I'm directly using rgb2hex function on the input.

How do I fix this?

Codesandbox → https://codesandbox.io/s/react-colorful-sketch-picker-ouz5t

Answer 1

The common way to declare a hex color is using 6 digits. When using the 3 digits format, you are shortening the 6 digits format. This only works if the digits in the positions R (so 1,2), G (3,4) and B(5,6) are equals.

Eg: You can write #00CCFF in 3 digits format as #0CF , but you cannot do the same on #425416

Maybe this thread can make my point more clear.

Answer 2

I just had to check if hex.length is equal to 4 & if it is, then I return :

<HexColorInput
  className="w-12 text-blue-gray-500"
  color={rgb2hex(selectedColor.rgba)}
  onChange={(hex: string) => {
    if (hex.length === 4) return
    updateBackground({
      selectedColor: {
        ...selectedColor,
        rgba: hex2rgb(hex),
      },
    })
  }}
/>

The source of HexColorInput specifically adds # to it so for any 3-digit hex, it makes it a 4-digit.

Edit:

The above answer doesn't return to previous value if I blur when HexColorInput contains 3 digit value like #21b so I cloned HexColorInput & removed a validation from it that also supported 3 digit hex.

My new HexInput.tsx looks like:

import React from 'react'

import { useEventCallback } from '../hooks'

const hex6 = /^#?[0-9A-F]{6}$/i
const validHex = (color: string): boolean => hex6.test(color)

// Escapes all non-hexadecimal characters including "#"
const escapeNonHex = (hex: string) => hex.replace(/([^0-9A-F]+)/gi, '').substr(0, 6)

type ComponentProps = {
    hex: string
    onChange: (newColor: string) => void
}

type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'>

export const HexInput = ({
    hex = '',
    onChange,
    onBlur,
    ...rest
}: Partial<InputProps & ComponentProps>) => {
    const [value, setValue] = React.useState(() => escapeNonHex(hex))
    const onChangeCallback = useEventCallback<string>(onChange)
    const onBlurCallback = useEventCallback<React.FocusEvent<HTMLInputElement>>(onBlur)

    // Trigger `onChange` handler only if the input value is a valid HEX-color
    const handleChange = React.useCallback(
        (e: React.ChangeEvent<HTMLInputElement>) => {
            const inputValue = escapeNonHex(e.target.value)
            setValue(inputValue)
            if (validHex(inputValue)) onChangeCallback('#' + inputValue)
        },
        [onChangeCallback]
    )

    // Take the color from props if the last typed color (in local state) is not valid
    const handleBlur = React.useCallback(
        (e: React.FocusEvent<HTMLInputElement>) => {
            if (!validHex(e.target.value)) setValue(escapeNonHex(hex))
            onBlurCallback(e)
        },
        [hex, onBlurCallback]
    )

    // Update the local state when `color` property value is changed
    React.useEffect(() => {
        setValue(escapeNonHex(hex))
    }, [hex])

    return (
        <input
            {...rest}
            value={value}
            spellCheck="false" // the element should not be checked for spelling errors
            onChange={handleChange}
            onBlur={handleBlur}
        />
    )
}

Here's the complete example with a demo → https://codesandbox.io/s/react-colorful-sketch-picker-ouz5t?file=/src/HexRgbaBox/HexInput.tsx