react-color icon indicating copy to clipboard operation
react-color copied to clipboard

CustomPicker does not work in modern React

Open hzhu opened this issue 5 years ago • 9 comments
trafficstars

Seems like there is a problem with CustomPicker higher-order component in React 16+. Can CustomPicker be used in React v16?

Works with React v15.6.1 https://codesandbox.io/s/custom-picker-old-react-forked-o9770

Does not work with React v16.12.0 https://codesandbox.io/s/custom-picker-new-react-ur2z4

hzhu avatar Aug 26 '20 16:08 hzhu

Same problem here, would love to have a hot-fix on this.

tazhel avatar Aug 27 '20 09:08 tazhel

Commenting getDerivedStateFromProps in ColorWrap.js has fixed the problem for me image

but I am not fully aware of the root cause, there is one related thread, where it mentioned that there is a dev-dependencies on an older version of react

hkurra avatar Aug 28 '20 10:08 hkurra

Root cause is #662 , componentWillReceiveProps can't be changed to getDerivedStateFromProps just like that.

React docs

Note that this method is fired on every render, regardless of the cause. This is in contrast to UNSAFE_componentWillReceiveProps, which only fires when the parent causes a re-render and not as a result of a local setState.

v2.17.3 works for me

avainola avatar Aug 28 '20 11:08 avainola

@hzhu @tazhel if you listen onChange and provide the changed colour to colorpicker through color props then it is working fine, Here is the working codeSandBox Project forked from your one. image

basically it is working in a controlled mode, not in AutoControlled mode or It is kind od providing your own CustomWrapper over color-picker instead of using ColorWrap

hkurra avatar Aug 28 '20 13:08 hkurra

Seems like there is a problem with CustomPicker higher-order component in React 16+. Can CustomPicker be used in React v16?

Works with React v15.6.1 https://codesandbox.io/s/custom-picker-old-react-forked-o9770

Does not work with React v16.12.0 https://codesandbox.io/s/custom-picker-new-react-ur2z4

xerigo avatar Aug 28 '20 17:08 xerigo

Any solutions on this one?

rooraggio avatar Oct 18 '20 16:10 rooraggio

The same problem with ChromePicker and SketchPicker.

"react": "16.13.1",
"react-dom": "16.13.1",
"react-color": "2.19.3"

monolithed avatar Nov 01 '20 09:11 monolithed

Any update on this thread ?

yarindeohcld avatar Nov 19 '20 11:11 yarindeohcld

Fix provided in #791

adamborowski avatar Dec 02 '20 14:12 adamborowski