Using hover-effect in a React component

[Nicknyr]

How would I use hover-effect in a React component? I've tried the following but I can't seem to get it to work. Had someone on Stack Overflow recommend using refs in place of document.querySelector.

import React, { Component } from 'react';
import hoverEffect from 'hover-effect';
import kakko from '../assets/kaapo.jpg';
import {kakkoRangers} from '../assets/kakko-rangers.jpg';
import {ladyLiberty} from '../assets/ladyliberty3.png';
import styled, { css } from 'styled-components';

const STYLES = styled.div`
  height: 100vh;
  width: 100%;

  .my-div {
    height: 20em;
    width: 30em;
  }
`;

class Test extends Component {
  constructor(props) {
    super(props);

    this.state = {

    }
    this.myRef = React.createRef();
  }

  render() {
    const animation = new hoverEffect({
          parent: this.myRef.current,
          intensity: 0.3,
          image1: '..assets/kaapo.jpg',
          image2: '..assets/kakko-rangers.jpg',
          displacementImage: '../assets/ladyliberty3.png'
      });

    return (
      <STYLES>
        <div>
          <h1>Test</h1>
          <div ref={this.myRef} className="my-div">
          </div>
        </div>
      </STYLES>
    );
  }
}

export default Test;

[robin-dela]

Hey Nick,

Sorry for the late reply, unfortunately I don't have React knowledge so I won't be able to help you. However if you check the dependant projects you'll find some using react, it might help you!

Cheers

[Marhime]

Hey @Nicknyr,

You should create your instance inside ComponentDidMount instead of the render() function.

Something like that:

componentDidMount() {
       const animation = new hoverEffect({
          parent: this.myRef.current,
          intensity: 0.3,
          image1: '..assets/kaapo.jpg',
          image2: '..assets/kakko-rangers.jpg',
          displacementImage: '../assets/ladyliberty3.png'
      });
  }

[sammartfrank]

Hi guys, just wanted to know if It would be able to use in a Typescript Enviroment?. Regards!

[MarcJerschov]

Hey guys, Did anybody managed to get it working with react? I'm getting massive errors

I'm getting the mistake './hover' does not contain a default export (imported as 'hoverEffect').

Regards:)

[develord]

its worked for me import hoverEffect from 'hover-effect/dist/hover-effect.js' and i changed e=require("gsap/TweenMax") to e=require("gsap") in first line after that just use hoverEffect like you want

[develord]

tested after fix work in vue and react

[Louhla]

Does somebody have a full example? I am using functional components, but still, don't understand why to define a const animation if I am not using it anywhere.

[larrycoal]

import React,{useRef,useEffect} from 'react'

let var=useRef(null) useEffect(()=>{ new hovereffect({ parent:var, image1: image path image2:image path displacementImage:path }) },[]}

......... <div ref={el=>var=el}>

[davidhavlin]

tested after fix work in vue and react

How? Im working in Vue especially nuxt, and i cant figure out how i have to implement this.. import just doesnt work

[develord]

tested after fix work in vue and react

How? Im working in Vue especially nuxt, and i cant figure out how i have to implement this.. import just doesnt work

Try to install the repo in my git i tested to in nuxt

[vishwajeetraj11]

Hey guys, Did anybody managed to get it working with react? I'm getting massive errors

I'm getting the mistake './hover' does not contain a default export (imported as 'hoverEffect').

Regards:)

Yes It Worked

Component import React, { useEffect, useRef } from "react"; import hoverEffect from 'hover-effect' import "./Displacement.scss" import Logo from "../assets/1.png" import Logo2 from "../assets/2.png" import Logo3 from "../assets/3.png"

const Displacement = () => { const img = useRef(null)

useEffect(() => {
    const effect = new hoverEffect({
        parent: img.current,
        intensity: 0.3,
        image1: Logo,
        image2: Logo2,
        displacementImage: Logo3
    })   
})

return (
    <div>
    <div ref={img} className="img-container">
    </div>
    </div>
)

}

export default Displacement

SCSS .img { width: 100%; height: 100%; object-fit: cover; }

.img-container { width: 60rem; height: 60rem; }

[FranchescoLivado]

Would anyone know how to use the .next() function of the library inside an onClick event?

Hey guys, Did anybody managed to get it working with react? I'm getting massive errors I'm getting the mistake './hover' does not contain a default export (imported as 'hoverEffect'). Regards:)

Yes It Worked

Component import React, { useEffect, useRef } from "react"; import hoverEffect from 'hover-effect' import "./Displacement.scss" import Logo from "../assets/1.png" import Logo2 from "../assets/2.png" import Logo3 from "../assets/3.png"

const Displacement = () => { const img = useRef(null)

useEffect(() => {
    const effect = new hoverEffect({
        parent: img.current,
        intensity: 0.3,
        image1: Logo,
        image2: Logo2,
        displacementImage: Logo3
    })   
})

return (
    <div>
    <div ref={img} className="img-container">
    </div>
    </div>
)

}

export default Displacement

SCSS .img { width: 100%; height: 100%; object-fit: cover; }

.img-container { width: 60rem; height: 60rem; }

[amenkhnissi]

hi , You must call the function "animation" (invoke it) so it can work , you must use use Effect

[ObaidNadeem]

does anybody know how do I run it with prev & next buttons ?

[Ajlveloper]

Hello, can someone explain to me why importing hover Effect gives me an error? I am using React.

[mejed-alkoutaini]

Hi, in order to use the Next & prev buttons with React, I used this way:

let effect;
useEffect(() => {
  effect = new hoverEffect({
    parent: img.current,
    intensity: 0.3,
    image1: image,
    image2: image2,
    displacementImage: image3,
  });
});

return (
  <div>
    <div ref={img} className="img-container">
      <button onClick={() => effect.next()}>Next</button>
      <button onClick={() => effect.previous()}>Prev</button>
    </div>
  </div>
);

note this way will not loop through the images, so for example, if you have 2 images, clicking the next button for the 2nd time will not work until you click the prev button, you could improve it by using a state to check the image index and a new function to call Next or Prev depends on the index

[fet-lains]

tested after fix work in vue and react

Hey, bro. How do you make it work in vue? I managed to implement this plugin in my project, everything is fine, canvas is created, but height is 0, therefore there is no image :(

[mejed-alkoutaini]

make sure to give the parent div a fixed height, this way the canvas gonna take the same height that the parent div has

[fet-lains]

make sure to give the parent div a fixed height, this way the canvas gonna take the same height that the parent div has

Yeah, I've already figured it out and implemented. It works! The only trouble was to make it adaptive, as I have three photos in a row and the screen is full width, so starting 1200px and higher the width and height change. But I solved it too. If setting height inline in html template it does not work. So I used a dynamic variable and height property in styles. In this case it works and it's adaptive! I can share the code.