Building a tints and shades colour generator with React and Values.js

• tints-shade-generator

  1 1 4.3 JavaScript

  An web application that generates tints and shades of various colours based on the user's input.

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;

• react-copy-to-clipboard

  1 2,292 0.0 JavaScript

  Copy-to-clipboard React component

The React Copy-to-clipboard is a simple JavaScript package that allows us to copy and paste contents via a button click.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• values.js

  2 267 0.0 JavaScript

  :grapes: Get the tints and shades of a color

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

• Google Fonts

  491 17,586 9.9 HTML

  Font files available from Google Fonts, and a public issue tracker for all things Google Fonts

  

Update the index.css file to contain the code snippet below. It enables us to use the custom Google font.

• chakra-ui

  344 36,514 9.0 MDX

  ⚡️ Simple, Modular & Accessible UI Components for your React Applications

  

Chakra UI is a library that allows you to build stunning and modern web applications using various UI components. It differs from other UI frameworks because it offers accessibility and dark mode support by default. Follow the steps below to Chakra UI to a React app.

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

Suggest a related project