Build a Box Shadow Generator Using React JS

//App.js
import React, { useState, useEffect } from "react";
import "./App.css";

function App() {
	const [hShadow, setHShadow] = useState(0);
	const [vShadow, setVShadow] = useState(0);
	const [blurRadius, setBlurRadius] = useState(0);
	const [
		spreadRadius,
		setSpreadRadius] = useState(0);
	const [
		shadowColor,
		setShadowColor] = useState("#0075ff");
	const [
		shadowColorOpacity,
		setShadowColorOpacity] = useState(1);
	const [
		shadowInset,
		setShadowInset] = useState(false);
	const [
		boxShadow,
		setBoxShadow] = useState("");
	const [
		copiedMessageVisible,
		setCopiedMessageVisible] = useState(false);

	useEffect(() => {
		generateShadow();
	}, [
		hShadow,
		vShadow,
		blurRadius,
		spreadRadius,
		shadowColor,
		shadowColorOpacity,
		shadowInset,
	]);

	const generateShadow = () => {
		const boxShadowValue = shadowInset
			? `inset ${hShadow}px ${vShadow}px ${blurRadius}px 
				${spreadRadius}px rgba(${hexToRgba(
				shadowColor, shadowColorOpacity
			)})`
			: `${hShadow}px ${vShadow}px ${blurRadius}px 
				${spreadRadius}px rgba(${hexToRgba(
				shadowColor, shadowColorOpacity
			)})`;
		setBoxShadow(boxShadowValue);
	};

	const hexToRgba = (color, opacity) => {
		const r = parseInt(color.slice(1, 3), 16);
		const g = parseInt(color.slice(3, 5), 16);
		const b = parseInt(color.slice(5, 7), 16);
		return `${r},${g},${b},${opacity}`;
	};

	const copyCode = () => {
		const codeElement = document.getElementById("code");
		codeElement.select();
		document.execCommand("copy");
		setCopiedMessageVisible(true);
		setTimeout(() => {
			setCopiedMessageVisible(false);
		}, 2000);
	};

	return (
		<div className="container">
			<div className="result">
				<div id="element"
					style={{ boxShadow: boxShadow }}>
				</div>
			</div>
			<div className="sliders">
				<div className="slider-wrapper">
					<label htmlFor="h-shadow">
						Horizontal Shadow:
					</label>
					<input
						type="range"
						id="h-shadow"
						max="100"
						min="-100"
						value={hShadow}
						onChange={(e) =>
							setHShadow(Number(e.target.value))}
					/>
				</div>
				<div className="slider-wrapper">
					<label htmlFor="v-shadow">
						Vertical Shadow:
					</label>
					<input
						type="range"
						id="v-shadow"
						max="100"
						min="-100"
						value={vShadow}
						onChange={(e) =>
							setVShadow(Number(e.target.value))}
					/>
				</div>
				<div className="slider-wrapper">
					<label htmlFor="blur-radius">
						Blur Radius:
					</label>
					<input
						type="range"
						id="blur-radius"
						max="100"
						min="0"
						value={blurRadius}
						onChange={(e) =>
							setBlurRadius(Number(e.target.value))}
					/>
				</div>
				<div className="slider-wrapper">
					<label htmlFor="spread-radius">
						Spread Radius:
					</label>
					<input
						type="range"
						id="spread-radius"
						max="50"
						min="-50"
						value={spreadRadius}
						onChange={(e) =>
							setSpreadRadius(Number(e.target.value))}
					/>
				</div>
				<div className="slider-wrapper">
					<label htmlFor="shadow-color">
						Shadow Color:
					</label>
					<input
						type="color"
						id="shadow-color"
						value={shadowColor}
						onChange={(e) =>
							setShadowColor(e.target.value)}
					/>
				</div>
				<div className="slider-wrapper">
					<label htmlFor="shadow-color-opacity">
						Shadow Color Opacity:
					</label>
					<input
						type="range"
						id="shadow-color-opacity"
						max="1"
						min="0"
						step="0.1"
						value={shadowColorOpacity}
						onChange={(e) =>
							setShadowColorOpacity(Number(e.target.value))}
					/>
				</div>
				<div className="input-wrapper">
					<label htmlFor="shadow-inset">
						Inset Shadow:
					</label>
					<input
						type="checkbox"
						id="shadow-inset"
						checked={shadowInset}
						onChange={(e) =>
							setShadowInset(e.target.checked)}
					/>
				</div>
			</div>
			<div className="code-wrapper">
				<textarea
					rows="2"
					id="code"
					readOnly
					value={`box-shadow: ${boxShadow};`}
				/>
				<button onClick={copyCode}>Copy</button>
				{copiedMessageVisible && (
					<div className="copy-message">
						Code Copied To Clipboard!!
					</div>
				)}
			</div>
		</div>
	);
}

export default App;