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.