Edit these docs Rate these docs

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;
        }
      

Using as button


        import React, { Component } from "react";
        import MDBColorPicker from "mdb-react-color-picker";
        import { MDBCard, MDBCardBody, MDBBtn } from "mdbreact";
        
        class App extends Component {
          state = {
            colorPicker2: false,
          };
        
          close = () => {
            this.setState({ colorPicker2: false });
          };
        
          toggle = () => {
            this.setState({ colorPicker2: !this.state.colorPicker2 });
          };
        
          render() {
            return (
              <MDBCard>
                <MDBCardBody className="text-center d-flex justify-content-center align-items-center flex-column">
                  <p className="pt-2">
                    Click the below button to activate the Color Picker
                  </p>
        
                  <MDBColorPicker
                    isOpen={this.state.colorPicker2}
                    close={this.close}
                    rgbaColor="rgba(18, 52, 86, 0.3)"
                  >
                    <MDBBtn size="sm" color="primary" onClick={this.toggle}>
                      Open picker
                    </MDBBtn>
                  </MDBColorPicker>
                </MDBCardBody>
              </MDBCard>
            );
          }
        }
        
        export default App;
        


    

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;
    
Edit these docs Rate these docs

React Bootstrap 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 })}>