Add React elements dynamically depending on the content height

user_1021930 0
Viewed 246

I have a blog post page, which have a component named PostContent that contains the text of the post. What I want to achieve is to dynamically add some content among the paragraphs of this PostContent depending on its length. I will do that by introducing the mentioned content with a distance of 1.5x viewport's height.

The problem I have is I cannot calculate the distance. I am using https://www.npmjs.com/package/html-react-parser but I cannot access to the offsetHeight property of the DOM Elements with that, which I want to know at what distance the element is from the top of the container element.

Is there a better/alternative way to achieve what I want?

Thanks!

Let's assume the viewport height is 100px and the post content 2000px, so I want to add an element every 200px (2x viewport's height).

<article>
 <p>This is the first example paragraph of 10px</p>
 <p>This is the second example paragraph of 10px</p>
  // ...
 <p>This is the twentieth example paragraph of 10px</p>
// ...
</article>

To do so, I'd need to iterate over all the paragraphs of the article in order to access to the offsetHeight of each one. That way, I'd know how far I am from the container. Hence, I'd add the wanted element always that offsetHeight is a multiple of 200px, right?

<article>
 <p>This is the first example paragraph of 10px</p>
 <p>This is the second example paragraph of 10px</p>
  // ...
 <p>This is the twentieth example paragraph of 10px</p>
 <!-- Here I would insert the first element,
      as it would be at 200px from the container (article).
  -->

 // .... same applies with the rest of the article ....
</article>
reactjs dom html javascript
1 Answers

If I understand the problem correctly, I think, You could use react useRef hook.

const ref = useRef(null)
const [contentLength, setContentLength] = useState();

useEffect(() => {
   if (ref && ref.current) {
       const { current } = ref;
       setContentLength(current.offsetHeight);
   }
}, [ref])

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

Here we assigned the ref element to the post content wrapper div.

Edited:

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

const paragraph = [
  'lorem ipsum dolor sit amet',
  'lorem ipsum dolor sit amet',
  'lorem ipsum dolor sit amet',
  'lorem ipsum dolor sit amet',
  'lorem ipsum dolor sit amet',
  'lorem ipsum dolor sit amet',
  'lorem ipsum dolor sit amet',
];

export function Main() {
  function Paragraph({ text, renderAdditionalElement }) {
    const ref = useRef(null);

    useEffect(() => {
      if (ref && ref.current) {
        const { offsetTop } = ref.current;
        if (offsetTop % 200 === 0) {
          renderAdditionalElement();
        }
      }
    }, [ref]);

    return <p ref={ref}>{text}</p>;
  }

  const renderAdditionalElement = () => <div />;

  return (
    <article>
      {paragraph.map(p => (
        <Paragraph text={p} renderAdditionalElement={renderAdditionalElement} />
      ))}
    </article>
  );
}
user_62108200
Related