diff --git a/docs/docs/09-addons.md b/docs/docs/09-addons.md index e1181ab0527b2..e2954bdd220fc 100644 --- a/docs/docs/09-addons.md +++ b/docs/docs/09-addons.md @@ -12,5 +12,6 @@ next: animation.html - `ReactTransitions`, for dealing with animations and transitions that are usually not simple to implement, such as before a component's removal. - `ReactLink`, to simplify the coordination between user's form input data and and the component's state. - `classSet`, for manipulating the DOM `class` string a bit more cleanly. +- Multiple event plugins for handling non-standard (but useful) events. To get the add-ons, use `react-with-addons.js` (and its minified counterpart) rather than the common `react.js`. diff --git a/docs/docs/09.3-class-name-manipulation.md b/docs/docs/09.3-class-name-manipulation.md index 9db1b0216ea74..cbc53c497cc33 100644 --- a/docs/docs/09.3-class-name-manipulation.md +++ b/docs/docs/09.3-class-name-manipulation.md @@ -4,7 +4,7 @@ title: Class Name Manipulation layout: docs permalink: class-name-manipulation.html prev: two-way-binding-helpers.html -next: examples.html +next: event-plugins.html --- `classSet()` is a neat utility for easily manipulating the DOM `class` string. diff --git a/docs/docs/09.4-event-plugins.md b/docs/docs/09.4-event-plugins.md new file mode 100644 index 0000000000000..b0394925f9e71 --- /dev/null +++ b/docs/docs/09.4-event-plugins.md @@ -0,0 +1,22 @@ +--- +id: event-plugins +title: Event plugins +layout: docs +permalink: event-plugins.html +prev: class-name-manipulation.html +next: examples.html +--- + +React has a few built-in event plugins to make your life easier. + + * `TapEventPlugin` provides an `onTouchTap` event which is similar to the so-called **fast click** event. This looks at raw touch events (`touchstart` `touchmove` and `touchend`) and interprets if the user intended to do a simple tap. + * `ResponderEventPlugin` implements a responder model to negotiate events between multiple components. See [the source code](https://github.com/facebook/react/blob/master/src/eventPlugins/ResponderEventPlugin.js) for more information. + +To install these plugins, you need to call `React.addons.injectEventPluginsByName()` like this: + +```javascript +React.addons.injectEventPluginsByName({ + TapEventPlugin: React.addons.TapEventPlugin, + ResponderEventPlugin: React.addons.ResponderEventPlugin +}); +``` diff --git a/src/ReactWithAddons.js b/src/ReactWithAddons.js index 3b92d59f813ac..8fb3d71941f77 100644 --- a/src/ReactWithAddons.js +++ b/src/ReactWithAddons.js @@ -25,15 +25,22 @@ "use strict"; +var EventPluginHub = require('EventPluginHub'); var LinkedStateMixin = require('LinkedStateMixin'); var React = require('React'); var ReactTransitionGroup = require('ReactTransitionGroup'); +var ResponderEventPlugin = require('ResponderEventPlugin'); +var TapEventPlugin = require('TapEventPlugin'); var cx = require('cx'); React.addons = { classSet: cx, + injectEventPluginsByName: + EventPluginHub.injection.injectEventPluginsByName, LinkedStateMixin: LinkedStateMixin, + ResponderEventPlugin: ResponderEventPlugin, + TapEventPlugin: TapEventPlugin, TransitionGroup: ReactTransitionGroup };