React Bootstrap Color Picker
React Color Picker - Bootstrap 4 & Material Design
React Bootstrap Color Picker plugin allows you to select different colors. You can successfully use it in various product wizards, clothing sales, or other situations where you need to be able to choose a color.To see the list of all properties and methods of the plugin see "API" tab on this page.
Basic Example
import React, { Component } from "react";
import MDBColorPicker from "mdb-react-color-picker";
import { MDBCard, MDBCardBody } from "mdbreact";
import "./index.css"; //Import necessary styles for this example
class App extends Component {
state = {
colorPicker1: false,
colorPickerValue1: "rgba(48, 48, 48, 1)"
};
close = () => {
this.setState({ colorPicker1: false });
};
toggle = () => {
this.setState({ colorPicker1: !this.state.colorPicker1 });
};
saveColorValue = value => {
this.setState({ colorPickerValue1: value.rgba });
};
render() {
return (
<MDBCard>
<MDBCardBody>
<p className="text-center">
Click the dark square to activate the Color Picker
</p>
<MDBColorPicker
transitionType="linear"
isOpen={this.state.colorPicker1}
close={this.close}
getValue={this.saveColorValue}
colorSpace="hex"
>
<div
style={{ backgroundColor: this.state.colorPickerValue1 }}
className="pickr mx-auto"
onClick={this.toggle}
/>
</MDBColorPicker>
</MDBCardBody>
</MDBCard>
);
}
}
export default App;
.pickr {
position: relative;
height: 2em;
width: 2em;
padding: .5em;
border-radius: .15em;
cursor: pointer;
background: transparent;
transition: background-color .3s;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
box-sizing: border-box;
}
Change color of the other elements
import React, { Component } from "react";
import MDBColorPicker from "mdb-react-color-picker";
import { MDBCard, MDBCardBody, MDBBtn, MDBRow, MDBCol } from "mdbreact";
class App extends Component {
state = {
colorPicker3: false,
colorPicker4: false,
colorPickerValue3: "rgba(252, 253, 255, 1)",
colorPickerValue4: "rgba(48, 48, 48, 1)",
colorValue: ""
};
close = id => () => {
const colorPickerId = `colorPicker${id}`;
this.setState({ [colorPickerId]: false });
};
toggle = id => () => {
const colorPickerId = `colorPicker${id}`;
this.setState({ [colorPickerId]: !this.state[colorPickerId] });
};
saveColorValue = id => value => {
const colorPickerValueId = `colorPickerValue${id}`;
this.setState({ [colorPickerValueId]: value.rgba });
};
render() {
return (
<MDBRow>
<MDBCol md="6" className="mx-auto">
<MDBCard style={{ backgroundColor: this.state.colorPickerValue3 }}>
<MDBCardBody className="text-center d-flex justify-content-center align-items-center flex-column">
<p>My background color will be changed</p>
<MDBColorPicker
isOpen={this.state.colorPicker3}
close={this.close(3)}
toggle={this.toggleColorPicker}
getValue={this.saveColorValue(3)}
>
<MDBBtn
outline
size="sm"
color="primary"
onClick={this.toggle(3)}
>
Open picker
</MDBBtn>
</MDBColorPicker>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol md="6" className="mx-auto">
<MDBCard>
<MDBCardBody className="text-center d-flex justify-content-center align-items-center flex-column">
<p style={{ color: this.state.colorPickerValue4 }}>
My text color will be changed
</p>
<MDBColorPicker
isOpen={this.state.colorPicker4}
close={this.close(4)}
toggle={this.toggleColorPicker}
getValue={this.saveColorValue(4)}
>
<MDBBtn
outline
size="sm"
color="primary"
onClick={this.toggle(4)}
>
Open picker
</MDBBtn>
</MDBColorPicker>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
);
}
}
export default App;
Copy saved colors to clipboard
import React, { Component } from "react";
import MDBColorPicker from "mdb-react-color-picker";
import { MDBCard, MDBCardBody, MDBBtn } from "mdbreact";
class App extends Component {
state = {
colorPicker: false
};
close = () => {
this.setState({ colorPicker: false });
};
toggle = () => {
this.setState({ colorPicker: !this.state.colorPicker });
};
render() {
return (
<MDBCard>
<MDBCardBody className="text-center d-flex justify-content-center align-items-center flex-column">
<p>
Click the "Save" button and check the results by pasting the
clipboard in some place.
</p>
<MDBColorPicker
isOpen={this.state.colorPicker}
close={this.close}
rgbaColor="rgba(201, 175, 211, 1.0)"
>
<MDBBtn color="primary" size="sm" onClick={this.toggle}>
Open picker
</MDBBtn>
</MDBColorPicker>
</MDBCardBody>
</MDBCard>
);
}
}
export default App;
The color representation
import React, { Component } from "react";
import MDBColorPicker from "mdb-react-color-picker";
import {
MDBCard,
MDBCardBody,
MDBBtn,
MDBRow,
MDBCol,
ListGroup,
ListGroupItem
} from "mdbreact";
class App extends Component {
state = {
colorPicker6: false,
colorPickerValue6: {
hex: "#fffe00",
cmyk: "cmyk( 0%, 0%, 100%, 0%)",
hsla: "hsla( 60, 100%, 50%, 1)",
hsva: "hsva( 15240, 100%, 100%, 1)",
rgba: "rgba(255, 254, 0, 1)"
}
};
close = () => {
this.setState({ colorPicker6: false });
};
toggle = () => {
this.setState({ colorPicker6: !this.state.colorPicker6 });
};
saveColorAllValues = value => {
this.setState({ colorPickerValue6: value });
};
render() {
return (
<MDBRow>
<MDBCol md="6" className="mx-auto">
<MDBCard style={{ backgroundColor: this.state.colorPickerValue6 }}>
<MDBCardBody className="text-center d-flex justify-content-center align-items-center flex-column">
<p>
Change actual color and check how every color representation is
described in the list
</p>
<MDBColorPicker
isOpen={this.state.colorPicker6}
close={this.close}
toggle={this.toggleColorPicker}
rgbaColor="rgba(255, 254, 0, 1)"
getValue={this.saveColorAllValues}
>
<MDBBtn outline size="sm" color="primary" onClick={this.toggle}>
Open picker
</MDBBtn>
</MDBColorPicker>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol md="6" className="mx-auto">
<MDBCard>
<MDBCardBody className="text-center d-flex justify-content-center align-items-center flex-column">
<ListGroup>
<ListGroupItem>
hex: {this.state.colorPickerValue6.hex}
</ListGroupItem>
<ListGroupItem>
rgba: {this.state.colorPickerValue6.rgba}
</ListGroupItem>
<ListGroupItem>
hsla: {this.state.colorPickerValue6.hsla}
</ListGroupItem>
<ListGroupItem>
hsva: {this.state.colorPickerValue6.hsva}
</ListGroupItem>
<ListGroupItem>
cmyk: {this.state.colorPickerValue6.cmyk}
</ListGroupItem>
</ListGroup>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
);
}
}
export default App;
Change the site background color
import React, { Component } from "react";
import MDBColorPicker from "mdb-react-color-picker";
import { MDBCard, MDBCardBody, MDBBtn } from "mdbreact";
class App extends Component {
state = {
colorPicker7: false,
};
close = () => {
this.setState({ colorPicker7: false });
};
toggle = () => {
this.setState({ colorPicker7: !this.state.colorPicker7 });
};
changeWebsiteBackgroundColor = value => {
document.body.style.background = `${value.rgba}`;
};
render() {
return (
<MDBCard>
<MDBCardBody className="text-center d-flex justify-content-center align-items-center flex-column">
<p>
Change the background color if this site dynamically by changing the
color in Color Picker
</p>
<MDBColorPicker
isOpen={this.state.colorPicker7}
close={this.close}
rgbaColor="rgba(255, 255, 255, 1.0)"
getValue={this.changeWebsiteBackgroundColor}
>
<MDBBtn color="primary" size="sm" onClick={this.toggle}>
Open picker
</MDBBtn>
</MDBColorPicker>
</MDBCardBody>
</MDBCard>
);
}
}
export default App;
React Color Picker - API
In this section you will find advanced information about the Color Picker plugin. You will find out which modules are required, what are the possibilities of configuring the plugin, and what events and methods you can use to work with it.
Download
This plugin requires a purchase.
Buy React Color Picker Plugin
Imports
import React from 'react';
import MDBColorPicker from "mdb-react-color-picker";
API Reference: Color Picker Properties
The table below shows the configuration options of the MDBColorPicker component.
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
clearLabel |
String | Clear |
Changes text in the clear button |
<MDBColorPicker
clearLabel="Reset">
|
colorSpace |
String | rgba |
Changes the colour format. Available formats: rgba, hex, hsla, hsva, cmyk
|
<MDBColorPicker
colorSpace="hex">
|
isOpen |
Boolean | False |
Shows or hides the colour palette | <MDBColorPicker
isOpen={false}> |
rgbaColor |
String | rgba( 255, 0, 0, 1) |
Sets start colour in the palette |
<MDBColorPicker
rgbaColor="rgba(0, 0, 255,1)">
|
saveLabel |
String | Save |
Changes text in the save button |
<MDBColorPicker
saveLabel="Save to clipboard">
|
stripHeight |
Number | 168 |
Sets height of the colour strip |
<MDBColorPicker
stripHeight={30}>
|
stripWidth |
Number | 8 |
Sets width of the colour strip |
<MDBColorPicker
stripWidth={30}>
|
transitionType |
String | ease-in-out |
Sets animations of the palette |
<MDBColorPicker
transitionType="linear">
|
API Reference: Color Picker Methods
| Name | Parameters | Description | Example |
|---|---|---|---|
close |
Closes the component when you click outside the component. |
<MDBColorPicker
close={()=> this.setState({ colorPicker: false })}>
|
|
getValue |
Returns selected color value when color changes. |
<MDBColorPicker
getValue={(value)=> this.setState({ colorPickerValue: value.rgba })}>
|