I have a favorites page where when I single click a button it will redirect to another page but when I hold it, it will have a pop up to remove from favorites how can I achieve that?
This is my favorite page
const FavoritePage = () => {
const getArray = JSON.parse(
localStorage.getItem(favoriteProductsStorageKey) || []
)
return (
<>
<Grid container spacing={3} className={classes.heading}>
<Grid item xs={2}>
<Box pt={0.5}>
<Link to="#">
<ArrowBackIcon className={classes.backSize} />
</Link>
</Box>
</Grid>
<Grid item xs={10}>
<Typography variant="h6" className={classes.header}>
My Favorites
</Typography>
</Grid>
</Grid>
<Box pt={1}>
{getArray.length > 0 ? (
<div className={classes.root}>
{getArray.map((product) => (
<div className="ProductCard" key={product._id}>
<div>
<Link to="product">
<img
className="ProductImage"
src={product.imagePrimary}
alt={product.name}
/>
</Link>
</div>
<div className="ProductCardDetails">
<div className="NameAndPrice">
<div className="ProductName">{product.name}</div>
</div>
</div>
</div>
))}
</div>
) : (
<h4 className={classes.top}>
Add your favorite products here by tapping the{" "}
<span className={classes.icon}>♥</span> symbol on the product.
</h4>
)}
</Box>
</>
)
}
export default FavoritePage
this is the imported function coming from my helpers.js to remove the favorites from local storage
function removeFavorite(product) {
const newFavoriteProducts = favorites.filter(
(iteratedProduct) => iteratedProduct._id !== product._id
)
setFavorites(newFavoriteProducts)
setToLocalStorage(favoriteProductsStorageKey, newFavoriteProducts)
}
I'm trying to find a solution on how to implement the long press to a single product to be removed from the favorites in the local storage.
As far as I am concerned There is no pure html or javascript way to accomplish this. But there is a trick in javascript you use the onmousedown listener
and onmouseup listener
. Here is a code to do so:
var timeout; var clicked = function (){ timeout = window.setTimeout(function(){ //Do work here alert('You clicked the button for 1300'); },1300)//Change time according to need but most commonly used time is 1300 milliseconds. } var unclicked = function (){ clearTimeout(timeout); }
span{ font-size: 130%; border: 2px solid blue; }
<html> <head> <meta charset="utf-8"> </head> <body> <div><span onmousedown="clicked();" onmouseup="unclicked();">Click me long!</span> To see the magic.</div> </body> </html>
What this code does is very simple it just sets timeout and if it is completed it executes the code.
Implementation using react hookscodesandbox.io
Full code:
import { useState, useEffect } from "react";
const LongPressButton = (props) => {
const [waitingForLongPress, setWaitingForLongPress] = useState(false);
const [timeoutId, setTimeoutId] = useState(null);
useEffect(() => {
if (timeoutId) {
clearTimeout(timeoutId);
}
if (waitingForLongPress) {
setTimeoutId(
setTimeout(() => {
props.onLongPress();
setWaitingForLongPress(false);
}, props.longPressDelayMS)
);
}
}, [waitingForLongPress]);
return (
<button
onMouseDown={() => setWaitingForLongPress(true)}
onMouseUp={() => setWaitingForLongPress(false)}
onClick={props.onClick}
>
{props.label}
</button>
);
};
export default function App() {
const [longPressCount, setLongPressCount] = useState(0);
const [clickCount, setClickCount] = useState(0);
return (
<div className="App">
<div>Times click: {clickCount}</div>
<div>Times long-pressed: {longPressCount}</div>
<LongPressButton
label="Press me"
onLongPress={() => {
setLongPressCount(longPressCount + 1);
}}
onClick={() => {
setClickCount(clickCount + 1);
}}
longPressDelayMS={1000}
/>
</div>
);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.