score:0
with the help of useeffect
we can perform actual setstate
or in this case console.log(color)
, some time (in this case after 0.2 sec) after the user stops dragging the mouse in colorpicker or moving the slider in opacity or etc.
useeffect(() => {
const timeoutid = settimeout(
() => {
if (color != null) {
//do your things
console.log(color);
}
},
200
);
return () => cleartimeout(timeoutid);
}, [color]);
score:1
try adding deferred
prop in the colorpicker
. with deferred
set to true, change handler only fires when you click the set button to commit the change:
<colorpicker value={color} onchange={handlechange} deferred />
edit: if you really really want to listen to the mouseup
event, you need to do some dirty work using plain js:
function mycolorpicker({ onchange }) {
const [open, setopen] = usestate(false);
const [, forcerender] = usereducer((x) => ++x, 0);
const colorref = useref<color>();
const handlechange = (newvalue: color) => {
colorref.current = newvalue;
forcerender();
};
react.useeffect(() => {
let colorgradientel = null;
let huesliderel = null;
let alphasliderel = null;
let inputels = [];
const handlemouseup = () => onchange(colorref.current);
if (open) {
settimeout(() => {
colorgradientel = document.queryselector(
'[data-testid="hsvgradient-color"]'
);
huesliderel = document.queryselector('[data-testid="hueslider"]');
alphasliderel = document.queryselector('[data-testid="alphaslider"]');
inputels = [...document.queryselectorall("input")];
const colorpickerpopoverel = document.queryselector(
".colorpicker-muipopover-root"
);
const observer = new mutationobserver((mutations) => {
mutations.foreach((mutation) => {
if (mutation.removednodes) {
setopen(false);
}
observer.disconnect();
});
});
observer.observe(colorpickerpopoverel!, { childlist: true });
colorgradientel?.addeventlistener("mouseup", handlemouseup);
huesliderel?.addeventlistener("mouseup", handlemouseup);
alphasliderel?.addeventlistener("mouseup", handlemouseup);
inputels.foreach((el) => {
el.addeventlistener("change", handlemouseup);
});
}, 10);
}
return () => {
colorgradientel?.removeeventlistener("mouseup", handlemouseup);
huesliderel?.removeeventlistener("mouseup", handlemouseup);
alphasliderel?.removeeventlistener("mouseup", handlemouseup);
inputels.foreach((el) => {
el.removeeventlistener("change", handlemouseup);
});
};
}, [open]);
return (
<colorpicker
onopen={() => setopen(true)}
value={colorref.current}
onchange={handlechange}
/>
);
}
usage
mycolorpicker
now only fires change
handler when the user stops dragging the mouse:
<mycolorpicker onchange={handlechange} />
Source: stackoverflow.com
Related Query
- ColorPicker material-ui-color, set color on mouse up
- Set background color of Material UI Snackbar
- How to set the background color of material ui drawer component with styled-components?
- How do I set the text color of primary raised buttons for React Material UI?
- how to set the border color to Card component in React material ui
- Set Typography text color in MUI
- MUI Drawer set background color
- Change color of Select component's border and arrow icon Material UI
- How to set color to text in React JS
- React Material UI: How to give a button a custom color when disabled?
- Set text input placeholder color in reactjs
- How do I set multiple lines to my tooltip text for Material UI IconButton?
- Set the background color of a Snackbar in MUI
- How do you change the Stepper color on React Material UI?
- Divider color change React Material Ui
- How to change the text color of the selected row in material ui table
- How to change outline color of Material UI React input component?
- Can you add an additional color in Material UI?
- How to set the background color of Tab.Navigator?
- How to set selected and hover color of ListItem in MUI?
- Change Ripple Color on click of Material UI <Button />
- Change default Text Color Material UI
- Material UI breakpoints to set orientation: portrait and landscape view
- Set Material UI react TableCell width dynamically
- How do I set container within React Material UI's AppBar Component?
- Material table how to set page size to All
- How can I create a color variant from a base color in React Material UI?
- Cannot set padding to 0 on Material UI Button
- How can I set a MenuItem as active in Drawer - Material UI?
- How do i set primary light/dark color to components of Material-ui ? i am using custom theme like here
More Query from same tag
- Change locale for Chart.js in React
- How to distinguish admin and customer role when create user with createUserWithEmailAndPassword firebase auth in ReactJS
- Importing Quill to React app throws "React is not defined", "Unexpected token import"
- onClick of both child and parent triggered when child is clicked
- Sending cookies to client with express not working
- React - Formik - Field Arrays - implementing repeatable form fields
- How do you send images to node js with Axios?
- Prevent URL encoding that is removing equals signs from URL
- Handle udefined or null in child component in reactjs
- React: trying to automatically select newly created list item
- Struggling in construction the tree hierarchy in react
- Doing if logic inside a functional component calling another function
- Why does React tell me unexpected token "."
- remove hidden field from final json after submit using Formik
- Applying Classes Conditionally in React
- NPM ERR! Missing: bootstrap-duallistbox@github:istvan-ujjmeszaros/bootstrap-duallistbox
- Suddenly started encountering Internal Server Error 500 on Mac for React App with Express server
- Redirect doesn't work after registering a new user to the db (express, mongoose, react)
- React-google-maps: How do I create a clickable kml map that shows me meta data of the kml?
- Prettier ask me to replace ⏎↹↹ with ·
- Changing state on route change Next.js
- React Native WebView rendering unexpected border at bottom
- Calling setState in a loop only updates state 1 time
- How to export & import custom helpers in JS/React?
- In RxJS or Redux Observable does debounceTime also act as a delay
- Hamburger Icon shifts left when opening menu
- How to get variable from js file in react component?
- scroll to element on reload page react
- api call with every key stroke
- How to set property asynchronously using useEffect for later use in function within a React component?