reactjscolorsjsxcolor-pickerreact-color

Implementing The SliderPicker from react-color library

I can't find a proper example on how to implement the SliderPicker as a functional component, any suggestions?

import React,{useState} from "react";
import "../Styles/Pixel-editor.scss"
import { HuePicker,SliderPicker } from 'react-color';

function App(){
  return(<div className="App"><SliderPicker/> </div>);
}
Solution

  • You need a state with object, which has a hex property. Then you can set it with onChangeComplete property:

    const [color, setColor] = React.useState({ hex: "#FFFFFF" });
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <SliderPicker
        color={color}
        onChangeComplete={(color) => setColor(color)}
      />
    </div>
  );

    https://codesandbox.io/s/polished-resonance-5il68w