diff --git a/cookbook/cb-11-event-listeners.md b/cookbook/cb-11-event-listeners.md new file mode 100644 index 00000000..7b206a86 --- /dev/null +++ b/cookbook/cb-11-event-listeners.md @@ -0,0 +1,37 @@ +--- +id: event-listeners +title: event listening in a React component +layout: docs +permalink: event-listeners.html +--- + +### Problem +You want to listen to an event inside a React component. + +### Solution +You can listen in componentDidMount. The below example will display the window dimensions. + +```js +var WindowDimensions = React.createClass({ + render: function() { + return {this.state.width} x {this.state.height}; + }, + updateDimensions: function() { + this.setState({width: $(window).width(), height: $(window).height()}); + }, + componentWillMount: function() { + this.updateDimensions(); + }, + componentDidMount: function() { + window.addEventListener("resize", this.updateDimensions); + // Using jQuery $(window).on('resize', this.updateDimensions); + }, + componentWillUnmount: function() { + window.removeEventListener("resize", this.updateDimensions); + // Using jQuery $(window).off('resize', this.updateDimensions); + } +}); +``` + +### Discussion +componentDidMount is invoked when the component has been mounted and has a DOM representation. Use this as an opportunity to operate on the DOM when the component has been initialized and rendered for the first time. \ No newline at end of file