On resize even listener is not being triggered.
class MainContainer extends React.Component {
constructor(props) {
super(props);
this.containerRef = React.createRef();
this.state = {};
}
componentDidMount() {
this.containerRef.current.addEventListener("resize", this.handleResize);
}
componentWillUnmount() {
this.containerRef.current.removeEventListener("resize", this.handleResize);
}
handleResize() {
console.log("handleResize");
}
render() {
return (
<React.Fragment>
<Container ref={this.containerRef}>
<Body />
</Container>
<ShadowTop show={this.state.top} />
</React.Fragment>
);
}
}
--
export const Container = styled.div`
@media (max-width: 760px) {
position: absolute;
}
margin-top: ${({ theme }) => theme.header.height.percent}%;
margin-top: -webkit-calc(${({ theme }) => theme.header.height.pixel}px);
margin-top: -moz-calc(${({ theme }) => theme.header.height.pixel}px);
margin-top: calc(${({ theme }) => theme.header.height.pixel}px);
height: ${({ theme }) => Math.abs(100 - theme.header.height.percent)}%;
height: -webkit-calc(100% - ${({ theme }) => theme.header.height.pixel}px);
height: -moz-calc(100% - ${({ theme }) => theme.header.height.pixel}px);
height: calc(100% - ${({ theme }) => theme.header.height.pixel}px);
position: fixed;
float: none;
clear: both;
top: 0;
right: 0;
width: ${({ theme }) => 100 - theme.sidebar.width.percent}%;
width: -webkit-calc(100% - ${({ theme }) => theme.sidebar.width.pixel}px);
width: -moz-calc(100% - ${({ theme }) => theme.sidebar.width.pixel}px);
width: calc(100% - ${({ theme }) => theme.sidebar.width.pixel}px);
z-index: 2;
pointer-events: auto;
overflow: auto;
`;
What am I doing wrong here?
Am trying to detect when the div aka Container a styled-components element has changed size.
The resize event is triggered on window, not on individual elements. This is because the resize event is meant to handle viewport resize, not content resize. To detect content size changes you can use ResizeObserver.
There are a lot of ways you can incorporate this into your React project. Here is a example similar to what you have in the question:
class MainContainer extends React.Component {
constructor(props) {
super(props);
this.ulRef = React.createRef();
this.state = { item: "", todoList: [] };
// Binding methods to the current intance is only needed if you pass
// the method as an argument to another function and want acces to the
// `this` keyword in the method.
this.handleResize = this.handleResize.bind(this);
this.addTodoItem = this.addTodoItem.bind(this);
}
componentDidMount() {
this.ulObserver = new ResizeObserver(this.handleResize);
this.ulObserver.observe(this.ulRef.current);
}
componentWillUnmount() {
this.ulObserver.disconnect();
}
handleResize(entries) {
console.log("handleResize");
console.log(entries);
}
addTodoItem(event) {
event.preventDefault();
this.setState((state) => ({
todoList: [...state.todoList, state.item],
item: "",
}));
}
render() {
return (
<div>
<form onSubmit={this.addTodoItem}>
<input
value={this.state.item}
onChange={e => this.setState({ item: e.target.value })}
/>
<button type="submit">add</button>
(or press <kbd>Enter</kbd>)
</form>
<ul ref={this.ulRef}>
{this.state.todoList.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
}
}
ReactDOM.render(<MainContainer />, document.querySelector("#root"));<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>There might also be libraries out there that help you combine ResizeObserver and React. But it doesn't hurt to understand what is happening under the hood.
resize events are only fired on the window object
You can read more about resize event
It should be:
componentDidMount() {
window.addEventListener('resize', this.handleResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
You can add debounce to handleResize to make it less often.