https://github.com/axetroy/react-async
react component for rend async data
https://github.com/axetroy/react-async
async react react-async react-component
Last synced: 10 months ago
JSON representation
react component for rend async data
- Host: GitHub
- URL: https://github.com/axetroy/react-async
- Owner: axetroy
- License: mit
- Created: 2017-05-04T17:34:29.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2019-04-08T12:46:56.000Z (almost 7 years ago)
- Last Synced: 2025-04-02T22:34:51.298Z (11 months ago)
- Topics: async, react, react-async, react-component
- Language: JavaScript
- Homepage: https://axetroy.github.io/react-async/
- Size: 286 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-async
[](https://greenkeeper.io/)
render the component with a async promise.
[Online Demo](https://axetroy.github.io/react-async/)
### Installation
```bash
npm install @axetroy/react-async
```
### Usage
```javascript
import React from 'react';
import { render } from 'react-dom';
import Async, {
Resolve,
Reject,
Finally,
Pending
} from '@axetroy/react-async';
const element = document.createElement('div');
document.body.appendChild(element);
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
promise: this.createPromise()
};
}
createPromise() {
return new Promise(function(resolve, reject) {
setTimeout(() => {
if (Math.random() > 0.5) {
resolve();
} else {
reject();
}
}, 1000);
});
}
render() {
return (
{
this.setState({ promise: this.createPromise() });
}}
>
Click and refresh
async header, i will always here
{component => {
return (
async status: {component.state.status}
);
}}
promise pending
promise resolve block
promise reject block
promise finally block
);
}
}
render(, element);
```
### Components
- Async
- props
- await
- Pending
- Resolve
- Reject
- Finally
### Run the Demo
```bash
git clone https://github.com/axetroy/react-async.git
yarn
yarn start
```
### License
The [MIT License](https://github.com/axetroy/react-async/blob/master/LICENSE)