diff --git a/docs/cookbook/cb-11-dom-event-listeners tip.md b/docs/cookbook/cb-11-dom-event-listeners tip.md index 35d176bf4f..fb4bdf90f6 100644 --- a/docs/cookbook/cb-11-dom-event-listeners tip.md +++ b/docs/cookbook/cb-11-dom-event-listeners tip.md @@ -9,7 +9,7 @@ permalink: dom-event-listeners-tip.html > > 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. -This example displays the window width: +Try to resize the window: ```js /** @jsx React.DOM */ diff --git a/docs/cookbook/cb-11-dom-event-listeners.md b/docs/cookbook/cb-11-dom-event-listeners.md index ac64ffcbdb..aedc98f45a 100644 --- a/docs/cookbook/cb-11-dom-event-listeners.md +++ b/docs/cookbook/cb-11-dom-event-listeners.md @@ -13,7 +13,7 @@ You want to listen to an event inside a component. > > 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. -This example displays the window width: +Try to resize the window: ```js /** @jsx React.DOM */ diff --git a/docs/cookbook/cb-13-external-libraries-integration tip.md b/docs/cookbook/cb-13-external-libraries-integration tip.md new file mode 100644 index 0000000000..122db1a2df --- /dev/null +++ b/docs/cookbook/cb-13-external-libraries-integration tip.md @@ -0,0 +1,40 @@ +--- +id: external-libraries-integration-tip +title: Integration with external libraries +layout: docs +permalink: external-libraries-integration-tip.html +--- + +Let's try jQuery. + +The general concept is simple: treat `componentDidMount` as jQuery's `ready` and tag your component with a `ref`. Then, call its `getDOMNode`. Notice that with `ref` (component scope), you don't need selectors anymore! + +```js +/** @jsx React.DOM */ + +var ToggleBox = React.createClass({ + componentDidMount: function() { + $(this.refs.dialogueBox.getDOMNode()).hide().fadeIn(500); + }, + render: function() { + return ( +