Create a color generator React App with Clipboard-Copy function function.
Tags: react, javascript, css, webdev
Published: 2023-01-09 14:15:35

Hi, My name is Yibo Chen and I am a self-taught developer.In this article, I build a Random Color Generate with React.js using values.js randomcolor API and clipboard-copy function.

You can check my whole project on my netify page: https://react-app-color-generator-ac.netlify.app/

Let me introduce you my whole project with code demostraction.

**Install NPM Package:**
> npx create-react-app color-generator
> npm install values.js --save

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

Import the Value.js in our App component:
> import Values from "values.js";
Build the h3 head tile of color generator.
With the form-input element and we can submit the input color to our page, and set the className with error, if there is error and the input column will show up the error with css styles.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fedjhb7kuhx811opnrxd.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eep7xk6gv9dhqs6jzc03.png)

Set the useState Hook default as false and if user input the error message, it would set the error state as true.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iuo4b1jo051p8rifqjj9.png)

Of course, we would use the try and catch method to make the whole function run well. With the **handleSubmit function** of form-input element onsubmit Event Attribute, we can make this happening.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1uhsotcrayl0sk7rxhrl.png)

Set the list as the default value of #f15025 hex color of showing 10 colors:
_const [list, setList] = useState(new Values("#f15025").all(10));_
With the list variable, let's map out our data to the SingleColor component and show on the react page:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwqk3vvy7f3sl12sh968.png)

If we check out our data with console.log method, we can see the data pass out as which number we set as Value.all(number), and based on those data we can build our project with values.js passing data, and also we can pass the color.hex value to the SingleColor component.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5z2v81fc8ehbplkos4m.PNG)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpp2dxcf12gsps3sc23h.png)

Set the background color based on the rgb data, we are passing in SingleColor component.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58y2vt39t0z7loqn7b4g.png)


Finally, let's build the _copied to clipboard_ function with useState hook and useEffect hook.
Set the default useState hook of alert as false, and with p element with context of 'copied to clipboard'.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0vknk76hxflksnski1v.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2sa3zqc24fwhsow0m0vd.png)

With onClick method and navigator.clipboard.writeText(hexValue) function, we can make the copy and paste function on page, and the useEffect hook with setTimeout and clearTimeout method to make the copy and paste show up in three minutes.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mtazenardkzly3e3klbd.png)

Thank you for reading my post and you can check my code on my github page: https://github.com/chenyibo406/color-generator or on netify to see the whole project: https://react-app-color-generator-ac.netlify.app/