HuePicker bar from react-color is not visible

Question

I am trying to make a react component with color picker using 'react-color' library.

The picker works in the sense that i can move the picker's dot and handleColorChange is triggered (I see it thanks to logs), but the gradient bar is not visible.

My component:

import PropTypes from 'prop-types';
import './AddBoard.css'
import React, { useState } from 'react';
import { HuePicker } from 'react-color';

function AddBoard({ onClose }) {
    const [color, setColor] = useState('#ffffff');

    function handleColorChange(newColor) {
        console.log(newColor);
        setColor(newColor.hex);
    }

    return (
        <>
            <div>
                <p>Board name: </p>
                <input type="text" id="boardName" className="boardNameInput" />
                <HuePicker color={color} onChange={handleColorChange}/>
                <button>Submit!</button> <button onClick={onClose}>Cancel</button>
            </div>
        </>
    )
}

AddBoard.propTypes = {
    onClose: PropTypes.func.isRequired
}

export default AddBoard;

the css file:

.AddBoardPopup {
    border: 5px solid snow;
    background-color: #271a38;
    margin: 0 auto;
    height: 300px;
    width: 300px;
}

Answer 1

Upon reviewing the React-Color documentation, I discovered that the correct way to import the HuePicker component might not be what you initially assumed. Instead of importing it as <HuePicker />, you may need to import like this:

var { Hue } = require('react-color/lib/components/common');

<Hue
  {...props}
  pointer={ CustomPointer }
  onChange={ handleChange }
  direction={ 'horizontal' || 'vertical' } />