Context provider for React.
npm install context-providerContext provider for React. Inspired from fluxible-addons-react/provideContext.
``shell`
$ npm install context-provider
babel-preset-es2015 and babel-preset-react, babel-plugin-transform-decorators-legacy, babel-plugin-transform-class-properties is required.
`javascript
import provideContext from 'context-provider/lib/provideContext';
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
class Header extends Component {
static contextTypes = {
userName: PropTypes.string.isRequired
};
render() {
return (
Hello, {this.context.userName}.
);
}
}
@provideContext({
userName: PropTypes.string.isRequired
})
class App extends Component {
static contextTypes = {
userName: PropTypes.string.isRequired
};
render() {
return (
Hi! {this.context.userName}!
ReactDOM.render(
document.getElementById('app')
);
`
`javascript
var provideContext = require('context-provider/lib/provideContext');
var React = require('react');
var ReactDOM = require('react-dom');
var Header = React.createClass({
contextTypes: {
userName: React.PropTypes.string.isRequired
},
render: function() {
return React.createElement(
'header',
null,
React.createElement(
'h1',
null,
'Hello, ',
this.context.userName,
'.'
)
);
}
});
var App = React.createClass({
contextTypes: {
userName: React.PropTypes.string.isRequired
},
render: function() {
return React.createElement(
'div',
null,
React.createElement(Header, null),
React.createElement(
'p',
null,
'Hi! ',
this.context.userName,
'!'
)
);
}
});
App = provideContext({
userName: React.PropTypes.string.isRequired
})(App);
ReactDOM.render(
React.createElement(App, {
context: { userName: 'John Doe' }
}),
document.getElementById('app')
);
``
MIT