@andre2xu/js-color-picker NPM

JS Color Picker

GitHub A simple and lightweight color picker for JavaScript projects. Feel free to use it for commercial and non-commercial purposes.

View demo

STARTED: 1 June 2023 FINISHED: 13 June 2023

Installation

npm install @andre2xu/js-color-picker

Usage

The following code block shows how to use it with React:

import React from 'react';
import JSColorPicker from "@andre2xu/js-color-picker";
import "../node_modules/@andre2xu/js-color-picker/index.css";

// CLASS COMPONENT
class App extends React.Component {
  componentDidMount() {
    // creates color picker after the component has rendered
    new JSColorPicker('my-element');
  }

  render() {
    return (
      <div className="App">
        <div id="my-element"></div>
      </div>
    );
  }
}

// FUNCTIONAL COMPONENT
function App() {
  React.useEffect(() => {
    // creates color picker after the component has rendered
    new JSColorPicker('my-element');
  }, []);

  return (
    <div className="App">
      <div id="my-element"></div>
    </div>
  );
};

export default App;

The following code block shows how to use the API:

const COLOR_PICKER = new JSColorPicker('my-element');

COLOR_PICKER.setSize(300, 250); // width: 300px, height: 250px

COLOR_PICKER.setScale(2); // width: (300*2)px, height: (250*2)px

// control visibility
COLOR_PICKER.hide();

COLOR_PICKER.show();

// detect & respond to changes in the color
COLOR_PICKER.addOnChangeListener(function (event) {
  console.log(event.color); // example: {r: 255, g: 0, b: 0, a: 0.5}
});

const RGBA = COLOR_PICKER.getColor(); // returns an object containing RGBA data

const CP_ELEMENT = COLOR_PICKER.getColorPicker(); // returns the color picker's element (use this if you want to add your own CSS or overwrite the existing ones)

IMPORTANT

The color picker can work on its own, it does not need React
Make sure that the container element for the color picker has rendered on the DOM, otherwise you would get an error saying that there's no element with the id you specified in the constructor
Be sure to import/include the stylesheet because not only is it required to render the color picker but it's also used to compute the dimensions of the canvases

CHANGELOG

1.1.0 - 2024-03-27

Added

Added an API method for binding a listener to the color picker that detects & reacts to changes in the color
The API code block in this README now includes all API methods

1.0.5 - 2024-01-06