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;

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)