在移动设备上禁用 hover 的需要

Question

I've built a project that is displaying images upon render. When you hover over an image a heart icon and shopping cart icon pop up and has their own functionality. Everything works fine but I need the heart icon and shopping cart icon to show up on mobile devices without the need to hover over them.

I'm using the custom hook below to manage the functionality of hover state.

  import  { useState, useEffect, useRef }from "react"
    
    const useHover = () =>{
    const[hovered, setHovered] = useState(false)
    const ref = useRef(null)
    
    useEffect(() => {
        const cleanUp = ref.current
    
        ref.current.addEventListener("mouseenter", enter)
        ref.current.addEventListener("mouseleave", leave)
        
        return () => {    
            cleanUp.removeEventListener("mouseenter", enter)
            cleanUp.removeEventListener("mouseleave", leave)
        }
    }, [])
    
        const enter = () =>{
            setHovered(true)
        }
    
        const leave = () =>{
            setHovered(false)
        }
    
    return [hovered, ref]
    
    }
    
    export default useHover

In my image component I'm using my ref

import React, { useContext } from "react";
import useHover from "../hooks/useHover"; 
import { Context } from "../../Context";

import "../Image/Image.css";

const Image = ({ className, photo }) => {
  const { 
  toggleFavorite, 
  addToCart, 
  cartItems, 
  removeFromCart } = useContext(Context);

  const [hovered, ref] = useHover();


  //displaying filled heart icon when clicked, or outline heart when hovered
  function heartIcon() {
    if (photo.liked_by_user) {
      return<i onClick={() => toggleFavorite(photo.id)} className="ri-heart-fill favorite"></i>
    } else if (hovered) {
      return <i onClick={() => toggleFavorite(photo.id)} className="ri-heart-line favorite"></i>
    }
  }




   //displaying shopping cart icon when clicked, or plus icon when hovered
  function cartIcon() {
    const alreadyInCart = cartItems.find((item) => item.id === photo.id);
    if (alreadyInCart) {
      return <i onClick={() => removeFromCart(photo)} className="ri-shopping-cart-fill cart shopping-cart-icon"></i>
    } else if (hovered) {
      return <i onClick={() => addToCart(photo)} className="ri-add-circle-line plus-icon"></i>
    }
  }




  return (
    <div ref={ref} className={`${className} image-container`}>
      <img
        className="image-grid"
        src={photo.urls.thumb}
        alt={photo.alt_description}
      />
      {heartIcon()}
      {cartIcon()}
    </div>
  );
};

export default Image;

Can anyone point me in the right direction on this? When on mobile devices I basically need to set my hovered state to stay true and have my icons to always show. Any help would be appreciated.

Answer 1

You can try an npm package like, react-device-detect , to detect mobile devices. In case it's a mobile you can return hovered as true always I guess.

CSS media query, @media (hover: hover) , seems like a better option here. You should check it out too.