FrontEnd web
Published in

FrontEnd web

Reactjs

Best Way to Generate a Random Color in React.js And Build A Color Project?

Generate a Random Color in React.js Project
Generate a Random Color in React.js Project

Demo:

Random color project demo

Let Start It:

  1. Install NPM Package
  2. Import
  3. use it
  4. Copy Color On Your Clipboard
  5. All Code

Install NPM Package:

npm i randomcolor
yarn add randomcolor

Import:

// Returns a hex code for an attractive colorimport randomColor from "randomcolor";

Use it:

MouseHover = e => {
// call Function Inside Mouse Hover Event
let color = randomColor();
this.setState({
bgColor: color
});
};
constructor(props) {
super(props);
this.state = {
bgColor: "",
display:false
};
}
<div
onClick={this.clickHandler}
style={{
backgroundColor: this.state.bgColor
}}
onMouseMove={this.MouseHover}
className="App"
/>

Copy Color On Your Clipboard:

Use Npm

npm install clipboard-copy

Use Yarn:

yarn add clipboard-copy

All Code:

Copy Code And Play It.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/