plug
Plugin system for React components.
It allows you to add plugins to React components the same way as mixins do.
API
plug
plug(plugins, reactComponentClass)
Plug some plugins to the specified react class
Arguments
plugins
(array): An of the plugin classes you wish to use.reactComponentClass
(function): A React class.
Returns A new react class which will hook the lifecycle events to the plugins and the original class.
Usage
var MyPlugin = ; var MyReactClass = React; moduleexports = ;
; Component ... MyPlugin MyReactClass;
plugins
A plugin is just a simple javascript class. You are not required to provide any particular methods. If you want to access one of the React component lifecycle hook, you just need to create the appropriate method on your class prototype:
{}Mypluginprototype { ... }; { ... }
You will get an instance of the plugin for each instance of the React class it is plugged to. The instance of the React class is passed to your plugin constructor.
{ ... } { ... }
As this system was first written for UI purposes, the DOM node of the instantiated React class is given to the componentDidMount
hook.
MyPluginprototype { ... } { ... }
Example of plugins can be find on the Spur organisation repositories:
- https://github.com/spur/style-plugin
- https://github.com/spur/button-plugin
- https://github.com/spur/transform-plugin
- ...
The 'plugged' React class
The plugins are accessible in your class through the plugins
property. They are mapped to the static property plugName
defined by each plugin.
{ ... }MyPluginplugName = 'my'; var MyReactClass = React;;
... MyPluginplugName = 'my'; // or class MyPlugin { static plugName = 'my'; } Component { thispluginsmyPluginKey; };
The plugins
property is not accessible in the React class constructor. There is a special hook you can use to access it right after the class instantiation: pluginsLoaded
var MyReactClass = React; Component { thispluginsmyPluginName; }
The plugins
property is available in every lifecycle hooks.
As a bonus, the React lifecycle 'componentDidMount' hook also get the component instance DOM node as parameter.
Component { ... }
Plugins dependency
A plugin can define static property dependencies
to request another plugin to be plugged to the base class.
... ... MyPlugindependencies = MyOtherPlugin;
Full Example
ES5
var plug = ;var React = ; { // component here is the instance of 'MyReactClass' that this pluging is plugged to. thiscomponent = component;} MyPluginplugName = 'my'; MyPluginprototype { thiscomponent;}; MyPluginprototype { // here is the DOMNode of my component, yay}; var MyReactClass = React; moduleexports = ;
ES6
;; { // component here is the instance of 'MyReactClass' that this pluging is plugged to. thiscomponent = component; } { thiscomponent; } { // here is the DOMNode of my component, yay } MyPluginplugName = 'my'; Component { superprops context; // 'this.plugins' is not yet created at this moment. Use the 'pluginsLoaded' hook instead. } { // this.plugins is created } { thispluginsmy; } MyPlugin MyReactClass;