An issue during importing for further component rendering
av-k opened this issue · comments
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.
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.