https://github.com/robertherber/react-as-promised
Library for easily presenting React Components in a control flow with Promise handling
https://github.com/robertherber/react-as-promised
control-flow placeholder promise-handling react
Last synced: over 1 year ago
JSON representation
Library for easily presenting React Components in a control flow with Promise handling
- Host: GitHub
- URL: https://github.com/robertherber/react-as-promised
- Owner: robertherber
- Created: 2017-08-02T14:18:50.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-09-17T22:16:56.000Z (almost 9 years ago)
- Last Synced: 2025-03-15T18:54:46.011Z (over 1 year ago)
- Topics: control-flow, placeholder, promise-handling, react
- Language: JavaScript
- Homepage: https://robertherber.github.io/react-as-promised
- Size: 1.96 MB
- Stars: 10
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[ ](https://app.codeship.com/projects/245704)
# react-as-promised
[Demo in Browser](https://robertherber.github.io/react-as-promised)
## Use case
Sometimes you want to present UI as part of a control flow (for example inside a redux action creator). This can be overly complicated if you trigger one action from multiple places in your application. react-as-promised makes it easier by providing a way to present UI components with a promise handle.
```
import { Manager } from 'react-as-promised';
import ConfirmAgeDialog from './components/ConfirmAgeDialog';
function proceed(userNeedsToConfirmAge){
if(userNeedsToConfirmAge){
const componentPromise = Manager.present(ConfirmAgeDialog);
return componentPromise
.then((userInput) => {
console.log('ok!', userInput);
})
.catch((error) => {
console.log('oh no!', error)
});
}
}
```
## Placeholder
For react-as-promised to know where in the React render tree to put your component a placeholder needs to be placed somewhere, a good place would probably be inside your redux provider (so you can use smart components) but outside your navigation:
```
import React from 'react';
import { Placeholder } from 'react-as-promised';
//...
class App extends React.Component
{
render(){
return
// <-- something like this
}
}
```
## Wiring up the props
By default react-as-promised will supply your presented component with the following props, adhering to the underlying [Bluebird](http://bluebirdjs.com/docs/api-reference.html) promise standard:
* resolve - to be called when successful
* reject - to be called when unsuccessful
* onCancel - used so you can clean up the view before it disappears, useful to handle animations etc (requires that you choose to [enable cancellation with Bluebird](http://bluebirdjs.com/docs/api/cancellation.html))
Of course you might want to use your own prop mappings instead - to allow reusing component logic. To use your own prop names supply them as arguments to present:
```
Manager.present(ConfirmAgeDialog, {}, 'onConfirm', 'onDismiss');
Manager.present(ConfirmAgeDialog, {}, ['onConfirm', 'onProceed'], ['onDismiss']); // react-as-promised can treat multiple props as resolvers/rejecters
```
## Registering a component
For reusability react-as-promised allows you to register a component for later use, which enables you to specify the prop name mapping at configuration time:
```
//..at setup..
Manager.registerComponent('ConfirmAgeDialog', ConfirmAgeDialog, 'onConfirm', 'onDismiss');
//..later..
Manager.presentRegistered('ConfirmAgeDialog');
```
## Specify props
We made it easy for you to forward props to the component you're presenting:
```
const props = { isRequired: true, theme: 'the-green-one' };
Manager.present(DialogWithExternalControl, props)
```
## Controlling the component from the outside
It's common for components to be controlled from the outside. For this we added the `updateProps` method on the returned componentPromise:
```
const hideDialog = () => {
componentPromise.updateProps({ open: false });
};
const props = {
open: true,
onDismiss: hideDialog,
onProceed: hideDialog,
};
const componentPromise = Manager.present(DialogWithExternalControl, props);
return componentPromise;
```