react.dev/cookbook/cb-11-dom-event-listeners t...

---
id: dom-event-listeners-tip
title: DOM event listeners in a component
layout: docs
permalink: dom-event-listeners-tip.html
---

> Note:
>
> This entry shows how to attach DOM events not provided by React ([check here for more info](/react/docs/cookbook/events.html)). This is good for integrations with other libraries such as jQuery.

Try to resize the window:

```js
/** @jsx React.DOM */

var Box = React.createClass({
  getInitialState: function() {
    return {windowWidth: window.innerWidth};
  },
  handleResize: function(e) {
    this.setState({windowWidth: window.innerWidth});
  },
  componentDidMount: function() {
    window.addEventListener("resize", this.handleResize);
  },
  componentWillUnmount: function() {
    window.removeEventListener("resize", this.handleResize);
  },
  render: function() {
    return <div>Current window width: {this.state.windowWidth}</div>;
  }
});

React.renderComponent(<Box />, mountNode);
```

`componentDidMount` is called after the component's mounted and has a DOM representation. This is often a place where you'd attach generic DOM events.
change some wording, add tip for events entry - No need to mention React, you know you're working with it =). - Wrap code elements in back ticks, so that they get the "box" styling for md. - You'd want the snippet to work inside the live editor, so you need to `renderComponent`. As per wiki specification, the DOM element on which to mount is `mountNode`, just like on the front page. - Don't forget the JSX pragma, or else your `render` fails. - Nitpick: empty line after the end of md. - No need for jQuery reference since 1. The general mood around React is that you don't need jQuery. 2. The syntax' still clear without jQuery. 3. We're doing a jQuery integration entry =). - `getInitialState` was absent. - You don't need `componentWillMount` here. fetch them in `getInitialState`. - The non-spoken convention seems to call the event handler `"handle" + eventName`. So `handleResize` clearly indicates it's a `resize` handler while `updateDimensions` might do something else. This latter name might actually be better under circumstances where you use call the method directly somewhere, but since we removed the only direct usage in `componentWillMount` this is fine. - Went OCD again and tried to keep the code short. `width` is enough of a demo. Removed `height`. - Distinguish between DOM events and React events. Wish we go full React events in a near future. 11 years ago			`---`
			`id: dom-event-listeners-tip`
			`title: DOM event listeners in a component`
			`layout: docs`
			`permalink: dom-event-listeners-tip.html`
			`---`

			`> Note:`
			`>`
fix all links to point to /react as root 11 years ago			`> This entry shows how to attach DOM events not provided by React ([check here for more info](/react/docs/cookbook/events.html)). This is good for integrations with other libraries such as jQuery.`
change some wording, add tip for events entry - No need to mention React, you know you're working with it =). - Wrap code elements in back ticks, so that they get the "box" styling for md. - You'd want the snippet to work inside the live editor, so you need to `renderComponent`. As per wiki specification, the DOM element on which to mount is `mountNode`, just like on the front page. - Don't forget the JSX pragma, or else your `render` fails. - Nitpick: empty line after the end of md. - No need for jQuery reference since 1. The general mood around React is that you don't need jQuery. 2. The syntax' still clear without jQuery. 3. We're doing a jQuery integration entry =). - `getInitialState` was absent. - You don't need `componentWillMount` here. fetch them in `getInitialState`. - The non-spoken convention seems to call the event handler `"handle" + eventName`. So `handleResize` clearly indicates it's a `resize` handler while `updateDimensions` might do something else. This latter name might actually be better under circumstances where you use call the method directly somewhere, but since we removed the only direct usage in `componentWillMount` this is fine. - Went OCD again and tried to keep the code short. `width` is enough of a demo. Removed `height`. - Distinguish between DOM events and React events. Wish we go full React events in a near future. 11 years ago
add lib integration entry; tweak 1 sentence 11 years ago			`Try to resize the window:`
change some wording, add tip for events entry - No need to mention React, you know you're working with it =). - Wrap code elements in back ticks, so that they get the "box" styling for md. - You'd want the snippet to work inside the live editor, so you need to `renderComponent`. As per wiki specification, the DOM element on which to mount is `mountNode`, just like on the front page. - Don't forget the JSX pragma, or else your `render` fails. - Nitpick: empty line after the end of md. - No need for jQuery reference since 1. The general mood around React is that you don't need jQuery. 2. The syntax' still clear without jQuery. 3. We're doing a jQuery integration entry =). - `getInitialState` was absent. - You don't need `componentWillMount` here. fetch them in `getInitialState`. - The non-spoken convention seems to call the event handler `"handle" + eventName`. So `handleResize` clearly indicates it's a `resize` handler while `updateDimensions` might do something else. This latter name might actually be better under circumstances where you use call the method directly somewhere, but since we removed the only direct usage in `componentWillMount` this is fine. - Went OCD again and tried to keep the code short. `width` is enough of a demo. Removed `height`. - Distinguish between DOM events and React events. Wish we go full React events in a near future. 11 years ago
			```js
			`/** @jsx React.DOM */`

			`var Box = React.createClass({`
			`getInitialState: function() {`
			`return {windowWidth: window.innerWidth};`
			`},`
			`handleResize: function(e) {`
			`this.setState({windowWidth: window.innerWidth});`
			`},`
			`componentDidMount: function() {`
			`window.addEventListener("resize", this.handleResize);`
			`},`
			`componentWillUnmount: function() {`
			`window.removeEventListener("resize", this.handleResize);`
			`},`
			`render: function() {`
			`return <div>Current window width: {this.state.windowWidth}</div>;`
			`}`
			`});`

			`React.renderComponent(<Box />, mountNode);`
			```

			`componentDidMount` is called after the component's mounted and has a DOM representation. This is often a place where you'd attach generic DOM events.