Simple dependency injection library for react
npm install --save react-needs
import React, { Component } from 'react'
import { Scope, Need, Want, Offer } from 'react-needs'
import ObservableState from 'observable-react-state'
class CounterState extends ObservableState {
state = { count: 0 }
inc() { this.setState({count: this.state.count + 1})}
}
const counter = new CounterState()
class Example extends Component {
render () {
return (
<Scope>
<h2>Need simple value</h2>
<Need value="a">{a => <p>{a}</p>}</Need>
<h2>Need a missing value</h2>
<Need value="missing">{x => <p>Should <em>not</em> Be rendered since missing in unmet</p>}</Need>
<h2>Want a missing value</h2>
<Want value="missing">{missing => <p>Should be rendered since missing in only wanted, not needed.</p>}</Want>
<h2>Need an observable value (An observable state because it's cool)</h2>
<Need value="counter">
{counter =>
<p>{counter.state.count} <button onClick={() => counter.setState({count: counter.state.count + 1})}>+1</button></p>}
</Need>
<Offer name="a" value={100} />
<Offer value="counter" value={counter}/>
</Scope>
)
}
}
Scope must be installed at the root of your app. Offers only exist within a scope.
Offer makes a value available within the scope.
Resolves the value name by looking in the Scope for offers. If no offer is found, it will not render its chidlren.
Resolves all values by looking in the Scope for offers. If value cannot be resolved, it will not render its chidlren.
Resolves the value name by looking in the Scope for offers. If no offer is found, it will not render its chidlren.
Resolves all values by looking in the Scope for offers. Renders its chidlren even if some of its wanted values could not be found.
That's it. Cheers
ISC © allain