Breaking News: Grepper is joining You.com. Read the official announcement!

Cursor.jsx:8 Uncaught TypeError: Cannot read properties of null (reading 'clientWidth')

Raviraj Solanki answered on February 25, 2022 Popularity 1/10 Helpfulness 8/10

answer Cursor.jsx:8 Uncaught TypeError: Cannot read properties of null (reading 'clientWidth')

Cursor.jsx:8 Uncaught TypeError: Cannot read properties of null (reading 'clientWidth')

Comment

const CustomCursor = () => {
    //follows the cursor
    const customRef = React.useRef(null)
   
    useEffect(() => {
      const onMouseMove = (e) => {
        const { clientX, clientY } = e
        const mouseX = clientX - customRef.current.clientWidth / 2
        const mouseY = clientY - customRef.current.clientHeight / 2
        customRef.current.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`
      }
      // add the event listener
      document.addEventListener('mousemove', onMouseMove)
      // cleanup function
      return () => {
        // remove the event listener when the component unmounts
        document.removeEventListener('mousemove', onMouseMove)
      }
    }, [])
  
    return (
      <div className="app-cursor" ref={customRef} />
    )
}

Popularity 1/10 Helpfulness 8/10 Language javascript

Source: stackoverflow.com

Tags: javascript null properties

Link to this answer
Share Copy Link