How to get the height of a react.element - javascript

I'm dynamically rendering a list of Symbol(react.element) by mapping into an array and placing each of its elements HTML tags. My question is therefore: how can I get the height of each of the rendered Symbol(react.element)? This seems not to be in the Symbol(react.element)'s object.
Thanks in advance for your help

Actually, if you are using Functional Components, would be better to isolate this resize logic in a custom hook instead of leave it inside the component. You can create a custom hook like this:
const useResize = (myRef) => {
const [width, setWidth] = useState(0)
const [height, setHeight] = useState(0)
const handleResize = () => {
setWidth(myRef.current.offsetWidth)
setHeight(myRef.current.offsetHeight)
}
useEffect(() => {
myRef.current && myRef.current.addEventListener('resize', handleResize)
return () => {
myRef.current.removeEventListener('resize', handleResize)
}
}, [myRef])
return { width, height }
}
and then you can use it like:
const MyComponent = () => {
const componentRef = useRef()
const { width, height } = useResize(componentRef)
return (
<div ref={componentRef}>
<p>width: {width}px</p>
<p>height: {height}px</p>
<div/>
)
}

class MyComponent extends Component {
constructor(props){
super(props)
this.myDiv = React.createRef()
}
componentDidMount () {
console.log(this.myDiv.current.offsetHeight)
}
render () {
return (
<div ref={this.myDiv}>element</div>
)
}
}

A modified version of Marcos answer.
I've placed a rendering bool to make sure all data is rendered before placing the height and width. This is to be sure that the height is calculated with all required elements in place instead of risking receiving an incorrect height and width.
useResize hook placed in a separate folder:
import { useState, useEffect, useCallback } from 'react';
export const useResize = (myRef: React.MutableRefObject<any>, rendering: boolean) => {
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);
const handleResize = useCallback(() => {
setWidth(myRef.current.offsetWidth);
setHeight(myRef.current.offsetHeight);
}, [myRef]);
useEffect(() => {
if (!rendering) {
myRef.current && myRef.current.addEventListener('resize',
handleResize(), { once: true });
}
}, [myRef, handleResize, rendering]);
return { width, height };
Example of usage:
const MyComponent = ({ A, B }) => {
// A and B is data that is required in component
const componentRef = useRef()
const { width, height } = useResize(componentRef, !A || !B)
if (!A || !B) return;
return (
<div ref={componentRef}>
<p>{A} {width}px</p>
<p>{B} {height}px</p>
<div/>
)
}

const componentRef = useRef(null)
and div ref={componentRef}

Related

react, To call a function from a child component to a parent component

I want to run a function on the parent component in the child component.
Eventually, I want to have the function run when the scroll goes to that position.
UseImperativeHandle was used, but props did not apply. Is there a way to apply props in the useImperativeHandle?
Also, is it correct to use IntersectionObserver this way?
child Components
function Percent(props, ref) {
useImperativeHandle(ref,() => ({
percentst: () => {
var cnt = document.querySelectorAll(".count")[props.num];
var water = document.querySelectorAll(".water")[props.num];
var percent = cnt.innerText;
var interval;
interval = setInterval(function () {
percent++;
cnt.innerHTML = percent;
water.style.transform = 'translate(0' + ',' + (100 - percent) + '%)';
if (percent == props.percent) {
clearInterval(interval);
}
}, 80);
}
}));
}
export default forwardRef(Percent);
parent component
function About(props) {
const containerRef = useRef();
const myRef = useRef();
const [isVisible, setIsVisible] = useState(false);
const callbackFunction = (entries) => {
const [entry] = entries;
setIsVisible(entry.isIntersecting);
};
const options = {
root: document.getElementById('skills'),
rootMargin: '0px',
threshold: 1
};
useEffect(() => {
const observer = new IntersectionObserver(callbackFunction, options);
console.log(containerRef.current)
if (containerRef.current) observer.observe(containerRef.current);
return () => {
myRef.current.percentst()
if (containerRef.current) observer.unobserve(containerRef.current);
};
}, [containerRef, options]);
return(
<div ref={containerRef}></div>
<Percent ref={myRef} />
)
}
export default About;
Two ways of doing this
Pass your method as a prop to the child (this may not be desirable)
Use custom event listeners/triggers
There are some packages out there that will help with events such as https://www.npmjs.com/package/react-custom-events

How to check which functional React Component has been viewed in the viewport latest?

My goal is to make it so I know which video the user has seen in the viewport latest. This was working until I turned the videos into functional React components, which I can't figure out how to check the ref until after the inital render of the React parent. This is currently the top part of the component:
function App() {
const ref1 = useRef(null);
const ref2 = useRef(null);
const ref3 = useRef(null);
function useIsInViewport(ref) {
const [isIntersecting, setIsIntersecting] = useState(false);
const observer = useMemo(
() =>
new IntersectionObserver(([entry]) =>
setIsIntersecting(entry.isIntersecting)
),
[]
);
useEffect(() => {
observer.observe(ref.current);
return () => {
observer.disconnect();
};
}, [ref, observer]);
return isIntersecting;
}
var videoProxy = new Proxy(videoViewports, {
set: function (target, key, value) {
// console.log("value " + value)
// console.log("key " + key)
console.log(videoViewports);
if (value) {
setMostRecentVideo(key);
//console.log("Most Rec: " + mostRecentVideo);
}
target[key] = value;
return true;
},
});
const [isGlobalMute, setIsGlobalMute] = useState(true);
const [mostRecentVideo, setMostRecentVideo] = useState("");
videoProxy["Podcast 1"] = useIsInViewport(ref1);
videoProxy["Podcast 2"] = useIsInViewport(ref2);
videoProxy["Podcast 3"] = useIsInViewport(ref3);
And each component looks like this:
<VideoContainer
ref={ref1}
videoProxy={videoProxy}
mostRecentVideo={mostRecentVideo}
setMostRecentVideo={setMostRecentVideo}
title="Podcast 1"
isGlobalMute={isGlobalMute}
setIsGlobalMute={setIsGlobalMute}
videoSource={video1}
podcastName={podcastName}
networkName={networkName}
episodeName={episodeName}
episodeDescription={episodeDescription}
logo={takeLogo}
muteIcon={muteIcon}
unmuteIcon={unmuteIcon}
></VideoContainer>
I had moved the logic for checking if the component was in the viewport into each component, but then it was impossible to check which component was the LATEST to move into viewport. I tried looking online and I don't understand how I would forward a ref here, or how to get the useIsInViewport to only start working after the initial render since it can't be wrapped in a useEffect(() => {}, []) hook. Maybe I'm doing this completely the wrong way with the wrong React Hooks, but I've been bashing my head against this for so long...
First of all: I'm not quite sure, if a Proxy.set is the right way of accomplishing your goal (depends on your overall app architecture). Because setting data does not always mean, the user has really seen the video or is in the viewport.
I've created a simple solution that uses two components. First the a VideoList that contains all videos and manages the viewport calculations so you don't have thousands of event listeners on resize, scroll and so on (or Observers respectively).
The Video component is a forwardRef component, so we get the ref of the rendered HTML video element (or in the case of this example, the encompassing div).
import { forwardRef, useCallback, useEffect, useState, createRef } from "react";
function inViewport(el) {
if (!el) {
return false;
}
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <=
(window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
const Video = forwardRef((props, ref) => {
return (
<div ref={ref}>
<p>{props.source}</p>
<video {...props} />
</div>
);
});
const VideoList = ({ sources }) => {
const sourcesLength = sources.length;
const [refs, setRefs] = useState([]);
useEffect(() => {
// set refs
setRefs((r) =>
Array(sources.length)
.fill()
.map((_, i) => refs[i] || createRef())
);
}, [sourcesLength]);
const isInViewport = useCallback(() => {
// this returns only the first but you can also apply a `filter` instead of the index
const videoIndex = refs.findIndex((ref) => {
return inViewport(ref.current);
});
if (videoIndex < 0) {
return;
}
console.log(`lastSeen video is ${sources[videoIndex]}`);
}, [refs, sources]);
useEffect(() => {
// add more listeners like resize, or use observer
document.addEventListener("scroll", isInViewport);
document.addEventListener("resize", isInViewport);
return () => {
document.removeEventListener("scroll", isInViewport);
document.removeEventListener("resize", isInViewport);
};
}, [isInViewport]);
return (
<div>
{sources.map((source, i) => {
return <Video ref={refs[i]} source={source} key={i} />;
})}
</div>
);
};
export default function App() {
const sources = ["/url/to/video1.mp4", "/url/to/video1.mp4"];
return (
<div className="App">
<VideoList sources={sources} />
</div>
);
}
Working example that should lead you into the right directions: https://codesandbox.io/s/distracted-waterfall-go6g7w?file=/src/App.js:0-1918
Please go over to https://stackoverflow.com/a/54633947/1893976 to see, why I'm using a useState for the ref list.

how to calculate width of component in react js?

I am trying to calculate the width of child component .is it possible to calculate width of children's ? here is my code
here is my code
https://codesandbox.io/s/reverent-hermann-yt7es?file=/src/App.js
<Tabs>
{data.map((i) => (
<li>{i}</li>
))}
</Tabs>
TABS.js
import React, { useEffect, useRef } from "react";
const Tabs = ({ children }) => {
const tabsRef = useRef(null);
const setTabsDimensions = () => {
if (!tabsRef.current) {
return;
}
// initial wrapper width calculation
const blockWidth = tabsRef.current.offsetWidth;
// const showMoreWidth = moreItemRef.current.offsetWidth;
// calculate width and offset for each tab
let tabsTotalWidth = 0;
const tabDimensions = {};
children.forEach((tab, index) => {
if (tab) {
console.log(tab);
// const width = !isMobile ? 200 : 110;
// tabDimensions[index] = {
// width,
// offset: tabsTotalWidth
// };
// tabsTotalWidth += width;
}
});
};
useEffect(() => {
setTabsDimensions();
});
return (
<ul ref={tabsRef} className="rc64nav">
{children}
</ul>
);
};
export default Tabs;
I know using ref we can access the dom property but how to apply ref in children element element.
here i am trying to calculate all item width
children.forEach((tab, index) => {
if (tab) {
console.log(tab);
Just answer your question how to get child's ref.
const Parent = () => {
const childRef = useRef()
// An example of use the childRef
const onClick = () => {
if (!childRef.current) return
console.log(childRef.current.offsetWidth)
}
return <Child childRef={childRef} />
}
const Child = ({ childRef }) => {
return <div ref={childRef}>Hello Child</div>
}
NOTE: the way I pass ref here is exactly the same way you pass parent method to child. And also ref supports two formats, i'm using the simple one, but you can also use () => {} format. https://reactjs.org/docs/refs-and-the-dom.html

NextJs passing dynamic width on resize not re-rendering

I'm trying to dynamically pass the width to a component's styles. On first load, it's okay, but if I resize it never re renders the component, even though the hook is working.
I read about that since NextJs is server side rendering this can cause this client side's issues. So here's the code:
Hook
const useWidth = () => {
if (process.browser) {
const [width, setWidth] = useState(window.innerWidth);
const handleResize = () => setWidth(window.innerWidth);
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, [width]);
return width;
}
return 0;
};
Component (reduced just to show the example)
const Login = () => {
const windowWidth = useWidth();
const width = windowWidth > CELLPHONE_WIDTH ? '36.6rem' : '90%';
const loginStyles = styles(width);
return (
<div className='container'>
<TextInput
type='text'
width={width}
placeholder='Email'
/>
</div>
);
};
Styles
function textInputStyles(width) {
return css`
width: ${width};
`;
}
export default textInputStyles;
Problem here is the code first runs on server side with Next.js. Because process.browser returns false on the server side, your hook logic is never registered. Only a 0 is returned. Since no hook has been registered and no event has been set, changing window size will not trigger a re-render.
You need to use a componentDidMount() or a useEffect.
Here is an example for your case that would work.
const useWidth = () => {
const [width, setWidth] = useState(0); // default width, detect on server.
const handleResize = () => setWidth(window.innerWidth);
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, [handleResize]);
return width;
};
On the other hand, if you want to ensure that your initial state is that of the browser window, you can load your component dynamically on the client side only.
import dynamic from 'next/dynamic'
const Login = dynamic(
() => import('./pathToLogin/Login'),
{ ssr: false },
)
and in your component where Login is used.
const TopLevelComponent = () => {
<Login {...props} />
}
and then you can use the window object freely in your Login component.
const useWidth = () => {
// Use window object freely
const [width, setWidth] = useState(window.innerWidth); // default width, detect on server.
Refer to this if there is still confusion.
Thanks a lot Hassaan Tauqir for your help!!! :D
When I saw your first answer I tried it but couldn't call the custom hook inside useEffect because it was breaking the rule Call Hooks from React function components
But I managed to achieve the solution with this code, that is almost the same as the one you posted after you edited the answer. The only difference is that in the dependencies array of the useEffect inside the custom hook im using width instead of the handler. Dunno if that makes any difference in this case but its working perfectly.
const useWidth = () => {
const [width, setWidth] = useState(0);
const handleResize = () => setWidth(window.innerWidth);
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, [width]);
return width;
};
And from the component Im using it like:
const Login = () => {
const [width, setWidth] = useState('0');
const windowWidth = useWidth();
useEffect(() => {
if (windowWidth < CELLPHONE_WIDTH) {
setWidth('90%');
} else {
setWidth('36.6rem');
}
}, []);
// rest of the code

Can I refactor multiple useEffect to single useEffect?

I have width in state which changes with window resize and showFilters as props which changes from true to false. And I want to remove listener on unmount. So, I have used three useState for each these conditions.
So, is there any refactor I can do to use all these in single useEffect.
import React, { useEffect, useRef, useState } from 'react'
import PropTypes from 'prop-types'
import { Icon } from 'antd'
import TrendsChart from './trendsChart'
import styled from '../styled-components'
const Chart = ({ showFilters }) => {
const [width, setWidth] = useState(null)
useEffect(() => {
window.addEventListener('resize', handleWindowResize)
updateWidth()
}, [width])
useEffect(() => {
setTimeout(updateWidth, 200)
}, [showFilters])
useEffect(() => () => {
window.removeEventListener('resize', handleWindowResize)
})
const updateWidth = () => {
const containerWidth = chartRef.current.clientWidth
setWidth(Math.floor(containerWidth))
}
const handleWindowResize = () => {
updateWidth()
}
const chartRef = useRef()
function render() {
return (
<styled.chart>
<styled.chartHeader>
Daily
</styled.chartHeader>
<styled.trendsChart id="chartRef" ref={chartRef}>
<TrendsChart width={width} showFilters={showFilters}/>
</styled.trendsChart>
<div>
<Icon type="dash" /> Credit Trend
</div>
</styled.chart>
)
}
return (
render()
)
}
Chart.propTypes = {
showFilters: PropTypes.bool.isRequired
}
export default Chart
from what i understand is
two of your useEffect can be merge
useEffect(() => {
window.addEventListener('resize',handleWindowResize)
return () => window.removeEventListener('resize',handleWindowResize)
},[width])
For the set timeout part, from what i understand. That is not needed because react will rerender everytime the width(state) is changed. Hope it is help. I'm new to react too.
You should look at CONDITIONS, when each effect works.
Listener should be installed ONCE, with cleanup:
useEffect(() => {
window.addEventListener('resize',handleWindowResize)
return () => window.removeEventListener('resize',handleWindowResize)
},[])
const handleWindowResize = () => {
const containerWidth = chartRef.current.clientWidth
setWidth(Math.floor(containerWidth))
}
NOTICE: [] as useEffect parameter, without this effect works on every render
... and it should be enough as:
handleWindowResize sets width on window size changes;
showFilters causes rerender automatically

Categories

Resources