This package takes any color picker for you choice, And wraps it as a gradient picker.
This plays well with the package angle picker, which allows your users to play with the gradient angle.
What you need to know before installing?
This package is using hooks, which means you need to use React 16.8 or higher.
There is a console.log("Getting backgrund;") [sic] in the latest version 2.0.0. It prints whenever I click on an instance of <GradientPickerPopover /> and a simple search led me to the dist version of this package: ./node_modules/react-linear-gradient-picker/dist/index.js, which does not exist in the repo.
This component fails to load when used in Next.js.
This library (or I think a dependency) is making use of DOMParser during the initial page-load which fails because Next.js does static pre-rendering/SSR for everything and DOMParser is a browser API and therefore not available during pre-rendering.
The stack trace
ReferenceError: DOMParser is not defined
Module.e.m.t
file:///Users/david/Documents/slantt-saas/slantt/node_modules/react-linear-gradient-picker/dist/index.js (1:8991)
e
file:///Users/david/Documents/slantt-saas/slantt/node_modules/react-linear-gradient-picker/dist/index.js (1:12235)
<unknown>
file:///Users/david/Documents/slantt-saas/slantt/node_modules/react-linear-gradient-picker/dist/index.js (1:12139)
Object.<anonymous>
file:///Users/david/Documents/slantt-saas/slantt/node_modules/react-linear-gradient-picker/dist/index.js (1:12290)
n
file:///Users/david/Documents/slantt-saas/slantt/node_modules/react-linear-gradient-picker/dist/index.js (1:403)
Module.<anonymous>
file:///Users/david/Documents/slantt-saas/slantt/node_modules/react-linear-gradient-picker/dist/index.js (1:20132)
n
file:///Users/david/Documents/slantt-saas/slantt/node_modules/react-linear-gradient-picker/dist/index.js (1:403)
<unknown>
file:///Users/david/Documents/slantt-saas/slantt/node_modules/react-linear-gradient-picker/dist/index.js (1:1202)
<unknown>
file:///Users/david/Documents/slantt-saas/slantt/node_modules/react-linear-gradient-picker/dist/index.js (1:1212)
<unknown>
file:///Users/david/Documents/slantt-saas/slantt/node_modules/react-linear-gradient-picker/dist/index.js (1:81)
The workaround
The solution is to import the module dynamically:
import dynamic from 'next/dynamic'
const GradientPicker = dynamic(() => import('react-linear-gradient-picker').then(m => m.GradientPicker), { ssr: false });
// use GradientPicker like normal
A better fix?
I am thinking it is probably somehow possible to avoid invoking DOMParser during page-load which would avoid the issue of it not being available during pre-rendering. Making this component easier to integrate with Next.js is a worthwhile thing IMO :)
Is there a way to call the onSelect function or select a colorstop from outside the gradient picker component? and not by clicking on the stop on the picker?
i need to select a colorstop from outside the palette, indirectly and change its CSS. Can anyone please help?
when i'm clicking on the stops it's not triggering the onPaletteChange.
(when i'm moving them it works)
is there another why to do something when the user click on the stops?
it seems like in the doc that it should trigger onPaletteChange
Hey @odedglas !
First of all, the new version is awesome! Really clean, and the popover is really great! You did a great job !
My last use case is that I allow users to select either a gradient or ... a single color (as a gradient with only one stop). I'd like the preview to be able to render it as a plain color.
I think the correct repository would be linear-gradient-parser for this and just update the asBackground function to check if there is only one stop, and if so, return just the color.
Is there a way to get the currently selected stop to be used when highlighting etc? Like an id indicating which pallet array index is selected. Thanks in advance.
It seems now that the color is changing when clicking and dragging, but not on simple click ( which seems to work with the "normal" color picker ) on the small color bar ( not the big square which is working fine ).
Am I doing something wrong? If not, how to make this clickable AND draggable?
Thanks in advance.