Package Exports

@andre2xu/js-color-picker
@andre2xu/js-color-picker/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@andre2xu/js-color-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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');

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

License

Distributed under the MIT License. See LICENSE for more information.