https://github.com/renansoares/useWaitForElements

A React Hook to check when elements are rendered.
https://github.com/renansoares/useWaitForElements

hooks mutationobserver react

Last synced: about 1 month ago
JSON representation

A React Hook to check when elements are rendered.

• Host: GitHub
• URL: https://github.com/renansoares/useWaitForElements
• Owner: renansoares
• License: mit
• Created: 2021-02-23T12:22:18.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-03-17T15:18:58.000Z (over 3 years ago)
• Last Synced: 2024-07-08T23:54:07.862Z (5 months ago)
• Topics: hooks, mutationobserver, react
• Language: TypeScript
• Homepage: https://github.com/renansoares/useWaitForElements
• Size: 112 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-react-hooks - `useWaitForElements`
• awesome-react-hooks-cn - `useWaitForElements`
• awesome-react-hooks - `useWaitForElements`
• awesome-react-hooks - `useWaitForElements`

README

        


useWaitForElements ⏳




A React hook to be used to know when elements are rendered built with 



MutationObserver.





## When do I need it?

Sometimes, you need to know when elements are currently rendered. One of the ways to do it is using MutationObserver. Using MutationObserver, this hook allows to know when a list of elements are rendered. 

React provides a [`solution`](https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node) when you want to know if a component is rendered that might be better than using this hook in some cases.

**This hook only tracks until all the elements are rendered. It stops observing after it, so if you are observing elements that can change state after the first render. I would recommend forking the repository and changing it.**

## Installation

```shell

npm install --save usewaitforelements

```

## Usage

You need to pass to the hook an object with an identifier and a [`selector`](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) for each element.

Hook will return an object with the id, and a boolean indicating the presence for each element.

## Example

```jsx

import React, { useState } from 'react'

import ReactDOM from 'react-dom'

import useWaitForElements from 'usewaitforelements'

function Component(...props) {

  const [shouldRender, setShouldRender] = useState(false);

  // Pass an object of ids and selectors to the hook

  const result = useWaitForElements({ element: '#elementId' });

  // Initial result will be { element: false }

  useEffect(() => {

      // Element will be rendered in 2 seconds

      setTimeout(() => setShouldRender(true), 2000);

      // After element is rendered, result will be { element: true }

  }, [setShouldRender]);

  return (


            {shouldRender && 
Element
}

            {!result.element && 
Element is not rendered
}

            {result.element && 
Element is rendered
}

         
)

}

```


### 🐛 Bugs

Please open an issue if you find a bug.

### 💻 Pull Requests

Pull requests are welcome! Feel free to submit a PR if you feel like it.

## LICENSE

MIT