How to reassign value of color manually with 'react-color-palette'?

Question

I'm trying to incorporate react-color-palette into my page, I'm just not sure how to reassign the value of color outside of clicking on the color picker element. I'd like to have another function or event that can also change the color value without user input and reflect the changes on the color picker.

I tried to add a variable colorinuse but the value is not reflecting any change if I try to change the value in another function

  var colorinuse = "#000000"
  const [color, setColor] = useColor(colorinuse);
  return ( 
  <ColorPicker color={color} onChange={setColor} />;
  )

Apologies if I could have been more clear, I'm just learning react and component libraries, and only a beginner at JS. I'm still not clear on the vocabulary and how it corresponds to what I am trying to create

Answer 1

It seems to be undocumented but - having gone through the code a little - it appears you can import ColorService from react-color-palette and use that to setColor dynamically.

In this example I have a separate button that once clicked calls the handleClick function to set the new colour to yellow.

import { useEffect } from 'react'
import { ColorPicker, ColorService, useColor } from "react-color-palette";

import "react-color-palette/css";

function App() {
  const [color, setColor] = useColor("#000");

  function handleClick() {
    setColor(ColorService.convert("hex", '#595333'));
  }

  return (
    <main>
      <ColorPicker color={color} onChange={setColor} />
      <button onClick={handleClick}>
        Choose yellow ('#595333')
      </button>
    </main>
  );
}

export default App