values.js VS tints-shade-generator

Values.js is an open-source package that enables us to generate the tints and shades of any colour.

You can check out the whole API introduction on https://github.com/noeldelgado/values.js

import { Box, Button, Flex, FormControl, Heading, Icon, Input, Text, Alert, AlertTitle, AlertIcon, } from "@chakra-ui/react"; import React, { useState } from "react"; import { FaGithub, FaTwitter } from "react-icons/fa"; import { useNavigate } from "react-router-dom"; const Home = () => { let [colour, setColour] = useState(""); const [alert, setAlert] = useState(false); const navigate = useNavigate(); const redirectPage = (e) => { e.preventDefault(); if (colour.startsWith("#") && colour.length >= 4) { //👇🏻 removes the # sign before redirecting the user colour = colour.substring(1); return navigate(`/colour/${colour}`); } else { setAlert(true); } }; return ( TintTastic Effortlessly {" "} create beautiful color palettes for your projects TintTastic is a user-friendly tint and shade generator that will elevate your color game in no time. setColour(e.target.value)} /> Generate Shades {alert && ( Only accepts hex code values! )} ); }; export default Home;