How to use @jaames/iro - 3 common examples

To help you get started, we’ve selected a few @jaames/iro examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github timmo001 / home-panel / src / Components / Utils / ColorWheel.tsx View on Github external
: props.color
          ? props.color
          : theme.palette.background.paper;
        if (!c) c = 'rgba(255, 255, 255, 1)';
        if (!validateColor(c)) c = 'rgba(255, 255, 255, 1)';

        colorPicker = new iro.ColorPicker(pickerNode, {
          width: 200,
          padding: 0,
          borderWidth: 1,
          borderColor: theme.palette.background.paper,
          color: c,
          transparency: props.lighting ? true : false,
          layout: !props.lighting && [
            {
              component: iro.ui.Wheel,
              options: {}
            }
          ]
        });
        if (colorPicker)
          colorPicker.on('input:end', (c: Color) => {
            handleSetColor(
              `rgba(${c.rgba.r}, ${c.rgba.g}, ${c.rgba.b}, ${c.rgba.a})`
            );
            props.handleColorChange(c);
          });
      } catch (error) {
        console.error('Color Picker - Error caught:', error);
        colorPicker = null;
        handleSetColor('rgba(255, 255, 255, 1)');
      }
github timmo001 / home-panel / src / Components / Utils / ColorWheel.tsx View on Github external
useEffect(() => {
    if (!pickerSetup) {
      iro.use(iroTransparencyPlugin);
      let colorPicker: {
        on: (arg0: string, arg1: (c: Color) => void) => void;
      } | null;
      try {
        let c = color
          ? color
          : props.color
          ? props.color
          : theme.palette.background.paper;
        if (!c) c = 'rgba(255, 255, 255, 1)';
        if (!validateColor(c)) c = 'rgba(255, 255, 255, 1)';

        colorPicker = new iro.ColorPicker(pickerNode, {
          width: 200,
          padding: 0,
          borderWidth: 1,
          borderColor: theme.palette.background.paper,
          color: c,
          transparency: props.lighting ? true : false,
          layout: !props.lighting && [
            {
              component: iro.ui.Wheel,
              options: {}
            }
          ]
        });
        if (colorPicker)
          colorPicker.on('input:end', (c: Color) => {
            handleSetColor(
github timmo001 / home-panel / src / Components / Utils / ColorWheel.tsx View on Github external
useEffect(() => {
    if (!pickerSetup) {
      iro.use(iroTransparencyPlugin);
      let colorPicker: {
        on: (arg0: string, arg1: (c: Color) => void) => void;
      } | null;
      try {
        let c = color
          ? color
          : props.color
          ? props.color
          : theme.palette.background.paper;
        if (!c) c = 'rgba(255, 255, 255, 1)';
        if (!validateColor(c)) c = 'rgba(255, 255, 255, 1)';

        colorPicker = new iro.ColorPicker(pickerNode, {
          width: 200,
          padding: 0,
          borderWidth: 1,

@jaames/iro

Modular, design-conscious color picker widget for JavaScript

MPL-2.0
Latest version published 3 years ago

Package Health Score

56 / 100
Full package analysis