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.
Set the useState Hook default as false and if user input the error message, it would set the error state as true.
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.
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:
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.
Set the background color based on the rgb data, we are passing in SingleColor component.
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'.
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.
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/
Top comments (0)