Name: react-provide
Owner: TABLEFLIP
Description: React Components for putting a value in context and fishing it out
Created: 2017-10-11 14:27:26.0
Updated: 2018-01-18 14:59:00.0
Pushed: 2018-01-23 08:51:54.0
Homepage: null
Size: 51
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
React Components for putting a value in context and fishing it out. Avoids deep chains of prop passing.
install react-provide
api.js
rt { contextProvider, withContext } from 'react-provide'
rt default class Api {
tItems: () => ['some', 'items']
reate a Provider that'll put and object called 'api' into context
rt const Provider = contextProvider('api')
reate a helper that pulls 'api' out of context and passes it as a prop
rt const withApi = withContext('api')
list.js
rt React from 'react'
rt { withApi } from './api'
se withApi to pass 'api' as a prop to the component
rt default withApi(({ api }) => (
iv>{api.getItems().map((name) => name)}</div>
main.js
rt React from 'react'
rt ReactDOM from 'react-dom'
rt Api, { Provider } from './api'
rt List from './list'
se the Provider so deeply nested components can use the api in context
tDOM.render(
rovider api={new Api()}>
<div><List /></div>
Provider>,
cument.getElementById('root')
contextProvider(key)Create a provider component that can be used to provide a value called key to nested components in context.
e.g.
rt { contextProvider } from 'react-provide'
t Provider = contextProvider('foo')
vider foo={'bar'}>
* your component tree */}
ovider>
withContext(key)Create a function that'll create a component to pull a value called key from context and pass it as a prop to your component.
e.g.
rt { withContext } from 'react-provide'
s MyComponent extends Component {
atic propTypes = {
foo: PropTypes.object.isRequired
nder () {
return <div>{this.props.foo}</div>
rt default withContext('foo')(MyComponent)
Feel free to dive in! Open an issue or submit PRs.
MIT © Alan Shaw