provideContext #
import provideContext from 'fluxible-addons-react/provideContext';
provideContext
wraps the Component
with a higher-order component that
specifies the child context for you. This allows the React context to propagate
to all children that specify their contextTypes
.
Receives the following parameters:
Component
: the component to wrap, typically your top-level application component, optional if using decorator patterncustomContextTypes
: additionalchildContextTypes
to add; useful for plugins that add to the component context
By default, the executeAction
and getStore
methods will be added to the
child context and customContextTypes
will be merged with these defaults.
Example #
The most typical and basic usage of provideContext
is to wrap your
Application component to ensure that it receives the getStore
and
executeAction
methods.
class Application extends React.Component {
render() {
...
}
}
Application = provideContext(Application);
export default Application;
Now when you render the Application component, you can pass in the component
context via the context
prop and be assured that all children will have
access to it by specifying the respective contextType
.
ReactDOM.renderToString(<Application context={context} />);
If you're using the
createElementWithContext()
method and you
passed a higher-order provideContext
component to the Fluxible constructor,
then the context
prop will automatically be passed in for you.
Plugins and Custom Component Context #
Since plugins have the ability to add new methods or properties to the
component context, you can specify custom childContextTypes
through the
second parameter.
Application = provideContext(Application, {
foo: PropTypes.string
});
Decorator #
***Decorators are an evolving proposal and should be used with caution as the API may change at any point. Decorator support in fluxible-addons-react was built against Babel 5's implementation of decorators. As of Babel 6, support for decorators has been removed although third party transforms have been attempted with limited success.
Decorators are also only proposed for classes and properties and therefore will not work with stateless functional components. See decorator pattern for more information on the proposal.***
@provideContext({
foo: PropTypes.string
})
class Application extends React.Component {
render() {
...
}
}
export default Application;