An issue during importing for further component rendering

[av-k]

Library version: 2.3.5
React version: 18.2.0
Environment: Linux workstation 6.6.8-200.fc39.x86_64 x86_64 GNU/Linux

If we'll take a look at the basic example we see:

import React from 'react'
import ColorPicker from 'react-best-gradient-color-picker'

function MyApp() {
  const [color, setColor] = useState('rgba(255,255,255,1)');

  return <ColorPicker value={color} onChange={setColor} />
}

If we'll try to use the same or similar code in the build we see the next warning in the IDE console:

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Also while using unit-tests I have been starting getting errors while calling the nested DOM elements from the rendered Component.

The cause of that is import:

import ColorPicker from 'react-best-gradient-color-picker'

it returns:

{
    ColorPicker: [Object: null prototype] {
        useColorPicker: [Function (anonymous)],
        default: {
            default: [Function (anonymous)],
            useColorPicker: [Function (anonymous)]
        }
    }
}

it means for the proper way we should use the syntax like that:

import React from 'react'
import CP from 'react-best-gradient-color-picker'

const ColorPicker = CP.default;

function MyApp() {
 const [color, setColor] = useState('rgba(255,255,255,1)');

 return <ColorPicker value={color} onChange={setColor} />
}

Please actualize the documentation for change imports.

[Harry Fox]

thanks @av-k this gave me the push to finish converting the project to TS.

I published a new release just a minute ago v3.0.2 which I believe should resolve this issue. If you get a second can you please confirm.

[av-k]

@hxf31891 the changes looks good to me 🚀
import works properly and the warning is gone.

Thank you!

[Harry Fox]

@av-k thanks for taking a peak. Glad to have another pair of eyes on it.