Datafox is a small decorator for fetching your API data, asynchronously binding the data to your (P)React component or Javascript class.
$ npm install --save datafox
- Fetching data asynchronously
- Binding api data to the
this.props- Triggering
componentDidUpdate()
- Triggering
- Binding data to class prototype (
this)- Triggering
didReceiveData()
- Triggering
- Using
unfetchas polyfill, for browser support
| Version | Size |
|---|---|
| Component | 731B |
| Vanilla | 260B |
import data from 'datafox';
const user = '/api/users/1';
@data({user})
class User extends Component {
...
The above code makes the result from the user URL available in the User component. this.props.user will result in an object fetched from the API.
Datafox makes sure the prop is initially set, so no undefined errors are returned if you add this.props.user.name in your render function.
Using datafox for vanilla classes is also possible.
import data from 'datafox/vanilla';
const user = '/api/users/1';
@data({user})
class SomeClass {
didReceiveData() { console.log(this.user) }
}
const someVar = new SomeClass();
someVar.user now contains the data coming from the api.
An updated code demo can be found here