LemonadeJS Color picker

The LemonadeJS JavaScript Color is a responsive and reactive component that simplifies color selection. It features two sections: a personalized palette and a pre-defined gradient of colors. With a customizable button, this component seamlessly integrates into your application, allowing users to pick colors effortlessly.

Documentation


Installation

npm install @lemonadejs/color

Settings

Attribute Type Description
pallete?ArrayA matrix containing hexadecimal color values. There is a default palette.
closed?BooleanControls the open and close state of the modal.
type?StringThe type of element that will toggle the color picker modal. Options: 'input', 'box' or empty.
value?StringThe value of the color that is currently selected.


Events

Event Type Description
onopen?() => voidCalled when modal opens.
onclose?() => voidCalled when modal closes.
onupdate?(instance.value) => voidCalled when value updates.



Examples


Quick example

Simple implementation of Color Component.



JavaScript example

See this example on codesandbox 
<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/color/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/color/dist/style.min.css" />

<div id="color"></div>

<script>
const root = document.getElementById("color")

Color(root, {
    type: 'input',
})
</script>
</html>

LemonadeJS example

See this example on codesandbox 
import lemonade from 'lemonadejs'
import Color from '@lemonadejs/color';
import '@lemonadejs/color/dist/style.css';

lemonade.setComponents({ Color });

function App() {
    let self = this;

    return `<>
            <Color type="input" />
        </>`;
}

React example

See this example on codesandbox 
import React, { useRef, useEffect } from "react";
import Color from "@lemonadejs/color";
import "@lemonadejs/color/dist/style.css";

export default function App() {
    const wrapperRef = useRef(null);
    const colorRef = useRef(null);
  
    useEffect(() => {
        if (!colorRef.current) {
            colorRef.current = Color(wrapperRef.current, {
                type: "input"
            });
        }
    }, []);
  
    return <div ref={wrapperRef}></div>;
}


Customization

This example showcases the use of a custom element to toggle the color picker.



JavaScript example

See this example on codesandbox 
<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/color/dist/index.min.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@lemonadejs/color/dist/style.css"
/>

<button id="btn">
  Toggle Color Picker
</button>
<div id="color"></div>

<script>
const root = document.getElementById("color");
const button = document.getElementById("btn");

const component = Color(root, {
  onupdate: function (color) {
    button.style.color = color;
  },
  palette: [
    ["#001969", "#233178", "#394a87", "#4d6396", "#607ea4", "#7599b3"],
    ["#00429d", "#2b57a7", "#426cb0", "#5681b9", "#6997c2", "#7daeca"],
    ["#3659b8", "#486cbf", "#597fc5", "#6893cb", "#78a6d1", "#89bad6"],
    ["#003790", "#315278", "#48687a", "#5e7d81", "#76938c", "#8fa89a"]
  ]
});

button.onclick = function () {
  component.closed = !component.closed;
};
</script>
</html>

LemonadeJS example

See this example on codesandbox 
import lemonade from 'lemonadejs'
import Color from '@lemonadejs/color';
import '@lemonadejs/color/dist/style.css';

lemonade.setComponents({ Color });

function App() {
  const self = this;

  self.handleUpdate = function(color) {
      self.fontColor = color;
  }

  self.closed = true;

  self.fontColor = '#000000';

  self.palette = [
    ['#001969', '#233178', '#394a87', '#4d6396', '#607ea4', '#7599b3' ],
    ['#00429d', '#2b57a7', '#426cb0', '#5681b9', '#6997c2', '#7daeca' ],
    ['#3659b8', '#486cbf', '#597fc5', '#6893cb', '#78a6d1', '#89bad6' ],
    ['#003790', '#315278', '#48687a', '#5e7d81', '#76938c', '#8fa89a' ],
  ];

  return `<>
      <button onclick="self.closed = !self.closed" style="color: {{self.fontColor}};">Toggle Color Picker</button>
      <Color :closed="self.closed" :onupdate="self.handleUpdate" :palette="self.palette"/>
  </>`
}

React example

See this example on codesandbox 
import React, { useRef, useEffect } from "react";
import Color from "@lemonadejs/color";
import "@lemonadejs/color/dist/style.css";

export default function App() {
  const wrapperRef = useRef(null);
  const colorRef = useRef(null);

  const [color, setColor] = useState("#000000");

  useEffect(() => {
    if (!colorRef.current) {
      colorRef.current = Color(wrapperRef.current, {
        onupdate: function (c) {
          setColor(c);
        },
        palette: [
          ["#001969", "#233178", "#394a87", "#4d6396", "#607ea4", "#7599b3"],
          ["#00429d", "#2b57a7", "#426cb0", "#5681b9", "#6997c2", "#7daeca"],
          ["#3659b8", "#486cbf", "#597fc5", "#6893cb", "#78a6d1", "#89bad6"],
          ["#003790", "#315278", "#48687a", "#5e7d81", "#76938c", "#8fa89a"]
        ]
      });
    }
  }, []);

  const handleToggle = function () {
    colorRef.current.closed = !colorRef.current.closed;
  };

  return (
    <>
      <button style={{ color: color }} onClick={handleToggle}>
        Toggle Color Picker
      </button>
      <div ref={wrapperRef}></div>
    </>
  );
}