Theo's Typesafe Cult•2y ago

Change image on hover in react project with tailwindcss

Hi, I am doing a project with react and tailwindcss, and I am having some problems: 1 - I need to change a image inside a button when I hover the button, but I dont have any idea on how to do it. 2 - I need to make a button than onClick it opens a little menu with 3 other buttons, and I dont know how to do it with Tailwind too. If someone have any ideia it would be very helpfull for me, thanks.

8 Replies

keshOP•2y ago

I am also trying to make a darkmode button but I keep getting this error when passing params to my useEffect "Argument of type 'string' is not assignable to parameter of type 'readonly unknown[]"

cornflour•2y ago

1) depends on the specifics of your requirement, but a way to implement it would be to have 2 images, one that is visible by default and hidden when the button is hovered, and the other image vice versa

const ButtonWithImage = () => {
  return (
    <button className="group ...other-tailwind-classes">  
      <Image src="/image-1.png" className="group-hover:hidden" />
      <Image src="/image-2.png" className="hidden group-hover:block" />
    </button>
  )
}

const ButtonWithImage = () => {
  return (
    <button className="group ...other-tailwind-classes">  
      <Image src="/image-1.png" className="group-hover:hidden" />
      <Image src="/image-2.png" className="hidden group-hover:block" />
    </button>
  )
}

2) This requires more than just tailwind but also js logic to handle the opening and closing and stuff. I recommend a headless library like headlessUI or radix which can provide you with unstyled components (such as https://headlessui.com/react/menu) to handle the logic 3) without context, I have no idea what the issue is lol

keshOP•2y ago

@corn flour I am going to test the things you send me just now. Thank you for your help. About the third problem I am going to send some prints here, but I deleted one parameter and it seems to be working, the problem is I just don't know why it works this way lol

keshOP•2y ago

this way it doesnt work and it pops the error I mentioned before

keshOP•2y ago

But if I delete changeMode from useEffect things start to work as it should

cornflour•2y ago

second param of useEffect is dep array, which takes in an array you need to put [changeMode] instead

keshOP•2y ago

Just did it, it works, thank you very much @corn flour Everything that you said worked, but I am trying to make the button using the library you sent and it's not working

cornflour•2y ago

well i wouldnt be able to tell what's not working from that lol

Gaming

Programming

Change image on hover in react project with tailwindcss