How do i connect a color pallete to a color picker

[Andrei Iosup]

Here is my code

const CustomColorPicker = ({ id, mode }) => <ColorPickerComponent id={id} mode={mode} modeSwitcher={false} inline showButtons={false} change={change} />;

const ColorPicker = () => (

  <div className="m-2 md:m-10 mt-24 p-2 md:p-10 bg-white rounded-3xl">

    <Header category="App" title="Color Picker" />

    <div className="text-center">

      <div id="preview" />

      <div className="flex justify-center items-center gap-20 flex-wrap">

        <div>

          <p className="text-2xl font-semibold mt-2 mb-4">Inline Pallete</p>

          <CustomColorPicker id="inline-palette" mode="Palette" />

        </div>

        <div>

          <p className="text-2xl font-semibold mt-2 mb-4">Inline Picker</p>

          <CustomColorPicker id="inline-picker" mode="Picker" />

        </div>

      </div>

    </div>

  </div>

);

I want to be able to choose a color from the color pallete and that color be automatically selected from the color picker so i can pick the exact shade

[YuvanShankar Arunagiri]

Hi Andrei,

We have checked your reported query and using the change event of color pallete component, we can get the selected color from pallete and set to color picker component shown as below.

function onChange(args) {

    var pickerElem = document.getElementById('inline-picker').ej2_instances[0];

    pickerElem.value = args.value;

  }

Sample link: https://stackblitz.com/edit/react-9hixfj?file=index.js

Get back to us if you need any further assistance on this. 

Regards,

YuvanShankar A