https://github.com/frankfang/promisecomponent

Inspired by Flutter's FutureBuilder. Preview =>
https://github.com/frankfang/promisecomponent

Last synced: 17 days ago
JSON representation

Inspired by Flutter's FutureBuilder. Preview =>

• Host: GitHub
• URL: https://github.com/frankfang/promisecomponent
• Owner: FrankFang
• Created: 2019-06-15T02:48:13.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T19:10:04.000Z (almost 2 years ago)
• Last Synced: 2024-09-23T18:38:47.335Z (about 2 months ago)
• Language: TypeScript
• Homepage: https://frankfang.github.io/PromiseComponent/dist/index.html
• Size: 2.34 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 24
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# promiseComponent

Make async code easy again!

## Installation

```bash

yarn add promise-component

```

## Usage

ComponentOne.js

```javascript 

import React from 'react';

import ReactDOM from 'react-dom';

import promiseComponent from 'promise-component';

const ComponentOne = promiseComponent({

  promiser: () => ajax(),

  render({props, status, result, run}) {

    switch (status) {

      case 'initial':

        return (<>

          search

        >);

      case 'pending':

        return (<>

          search

          loading...

        >);

      case 'fulfilled':

        return (<>

          search

          


            succeed: {JSON.stringify(result)}

          

        >);

      case 'rejected':

        return (<>

          search

          


            failed: {(result).message}

          

        >);

    }

  }

});


export default ComponentOne;

function ajax() {

  return new Promise((resolve, reject) => {

    setTimeout(() => {

      if (Math.random() > 0.5) {

        resolve([

          {id: 1, name: 'Frank'},

          {id: 2, name: 'Jack'}

        ]);

      } else {

        reject(new Error('network broken'));

      }

    }, 1500);

  });

}

```