ReactJS – Get Height of an element

by

For those who are interested in using react hooks, this might help you get started.

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

export default () => {
  const [height, setHeight] = useState(0)
  const ref = useRef(null)

  useEffect(() => {
    setHeight(ref.current.clientHeight)
  })

  return (
    <div ref={ref}>
      {height}
    </div>
  )
}

More Related Contents:

  1. React setState not updating state
  2. Trying to use fetch and pass in mode: no-cors
  3. Rerender view on browser resize with React
  4. React Context vs React Redux, when should I use each one? [closed]
  5. How can I use React hooks in React classic `class` component?
  6. How to handle the `onKeyPress` event in ReactJS?
  7. Why is useState not triggering re-render?
  8. Is there a way to check if the react component is unmounted?
  9. react-router getting this.props.location in child components
  10. How to do setState inside callback: ReactJS
  11. How do I use external script that I add to react JS?
  12. Can I execute a function after setState is finished updating?
  13. React form onChange->setState one step behind
  14. init state without constructor in react
  15. Event timeline with animation
  16. How to force remounting on React components?
  17. How do you import a javascript package from a cdn/script tag in React?
  18. Cannot update a component while rendering a different component warning
  19. What do curly braces mean in JSX (React)?
  20. How to print React component on click of a button?
  21. react-router-dom v6 Routes showing blank page
  22. react-router (v4) how to go back?
  23. how to set up an inline svg with webpack
  24. Custom _app and _document get ignored when moving files to src/pages folder in Next.js
  25. How can I dispatch function in redux?
  26. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  27. Only numbers. Input number in React
  28. Disable chrome react DevTools for production
  29. You’re importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with “use client”
  30. React props: Should I pass the object or its properties? Does it make much difference?

Leave a Comment