Long press event in ReactJs

Question

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.

Does this https://stackoverflow.com/questions/48048957/react-long-press-event answer your question? — Nemanja, Jul 21 '21 at 08:54

Programmerabc · Answer 1 · 2021-07-21T09:38:54.387

0

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.

edited Jul 21 '21 at 09:38

answered Jul 21 '21 at 09:19

Programmerabc

329
2
10

Hi, question, where is the start and end will be used. I tried this it's not alerting on my react – Pinky Promise Jul 21 '21 at 09:31
@PinkyPromise I actually forgot to remove them while posting them I edited them. There is nothing to do with react and I used alert used for you to understand and needs to clicked for 1.3 second to show – Programmerabc Jul 21 '21 at 09:45
I am noob in react but it completely works with web and hopefully should work with react. If it does't works then you can use `var ele = document.getElementById('elemId');` and then `ele.addEventListener('mouseup', function() {clearTimeout(timeout)})` similarly `ele.addEventListener('mousedown', function() {//above code})` – Programmerabc Jul 21 '21 at 09:57

Oleksandr Kovalenko · Answer 2 · 2021-07-21T15:14:42.920

Implementation using react hooks codesandbox.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>
  );
}

Long press event in ReactJs

2 Answers2