Useful React hooks

• useColorPair() - generate background color and pick text color with correct contrast, from any string input

Installation

npm i @sajtempler/react-hooks

or

yarn add @sajtempler/react-hooks

Usage

useColorPair

Generate background color and pick text color with correct contrast, from any string input.

import { useColorPair } from "@sajtempler/react-hooks";

const App = () => {
  const [input, setInput] = useState("");

  /**
   * @type {{ color: string, backgroundColor: string }}
   */
  const { color, backgroundColor } = useColorPair(input);

  return (
    <input
      style={{ color, backgroundColor }}
      value={input}
      onChange={(e) => setInput(e.target.value)}
    />
  );
};

add two more "!!"

Development

Running tests requires node >= 16 due to crypto.webcrypto for SHA-1 digest.