https://github.com/jonbnewman/use-prompt
Display a react component to a user asynchronously
https://github.com/jonbnewman/use-prompt
async async-await hook hooks react typescript
Last synced: 15 days ago
JSON representation
Display a react component to a user asynchronously
- Host: GitHub
- URL: https://github.com/jonbnewman/use-prompt
- Owner: jonbnewman
- License: mit
- Created: 2022-01-02T09:57:26.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-01-13T14:35:33.000Z (over 3 years ago)
- Last Synced: 2025-03-18T15:47:20.462Z (about 1 month ago)
- Topics: async, async-await, hook, hooks, react, typescript
- Language: TypeScript
- Homepage: https://useprompt.jonbnewman.dev
- Size: 1.07 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# use-prompt
[](https://coveralls.io/github/jonbnewman/use-prompt?branch=main)
[](https://www.codacy.com/gh/jonbnewman/use-prompt/dashboard?utm_source=github.com&utm_medium=referral&utm_content=jonbnewman/use-prompt&utm_campaign=Badge_Grade)
[](https://www.npmjs.com/package/use-prompt)
**use-prompt** is a [React Hook](https://reactjs.org/docs/hooks-intro.html) that lets you conveniently display a component to a user asynchronously.
This allows you to ask a user for input, prompt for an answer, display a message, or do whatever you want in an asynchronous manner.
Features:
- Use your own custom components
- Promise-based (async/await and try/catch capable)
- N-number of concurrent prompt support
- Render anywhere you like for each prompt
- Typescript support
- Minimalistic, easy to use API
- Very small bundle size
---
1. [API Details](https://useprompt.jonbnewman.dev/api)
1. [Typescript](https://useprompt.jonbnewman.dev/typescript)
1. [Examples](https://useprompt.jonbnewman.dev/examples)
- [Basic example](https://useprompt.jonbnewman.dev/examples/basic-example)
- [Async/await and try/catch](https://useprompt.jonbnewman.dev/examples/async)
- [Sequential prompts](https://useprompt.jonbnewman.dev/examples/sequential)
- [Concurrent prompts](https://useprompt.jonbnewman.dev/examples/concurrent)
- [Persistant prompts](https://useprompt.jonbnewman.dev/examples/persistant)
- [Render control](https://useprompt.jonbnewman.dev/examples/render-control)
---
## Installation
```bash
npm i use-prompt
```
```bash
yarn add use-prompt
```
## API
```javascript
const [prompt, showPrompt, isVisible, clearPrompt] = usePrompt(
options?: {
persist?: boolean;
}
): [RenderedPrompt, ShowPrompt, IsVisible, ClearPrompt]
```
See the [API Details page](https://useprompt.jonbnewman.dev/api) for more information.
## Basic example
The following demonstrates a very basic example use of `usePrompt`:
```javascript
import usePrompt from 'use-prompt';
function App() {
const [prompt, showPrompt, isVisible] = usePrompt();
function showMyPrompt() {
showPrompt(({ resolve }) => (
<>
She sells seashells by the seashore.
Ok thanks
>
));
}
return (
Show prompt
{prompt}
);
}
```
### Async/await and try/catch
Use async/await and try/catch in order to retrieve what the users response within the prompt was:
```javascript
import { useState } from 'react';
import usePrompt from 'use-prompt';
function App() {
const [prompt, showPrompt, isVisible] = usePrompt();
const [cancelReason, setCancelReason] = useState(null);
const [confirmResponse, setConfirmResponse] = useState(null);
async function showMyPrompt() {
try {
const response = await showPrompt(({ resolve, reject }) => (
<>
Are you sure?
reject('clicked cancel')}>Cancel
resolve('clicked yes')}>Yes
>
));
setConfirmResponse(response);
} catch (reason) {
setCancelReason(reason);
}
}
return (
<>
Show prompt
{prompt}
{confirmResponse && `Prompt was confirmed: ${confirmResponse}`}
{cancelReason && `Prompt was cancelled: ${cancelReason}`}
>
);
}
```
## Sequential prompts
Display prompts one after another in a sequential manner:
```javascript
import usePrompt from 'use-prompt';
function Prompt({ resolve, message }) {
return (
<>
{message}
Ok thanks
>
);
}
function App() {
const [prompt, showPrompt, isVisible] = usePrompt();
async function showPrompts() {
await showPrompt((props) => );
await showPrompt((props) => );
await showPrompt((props) => );
}
return (
Show prompts
{prompt}
);
}
```
## Concurrent prompts
Display as many prompts concurrently as you want:
```javascript
import usePrompt from 'use-prompt';
function Prompt({ resolve, message }) {
return (
<>
{message}
Ok thanks
>
);
}
function App() {
const [prompt1, showPrompt1, isVisible1] = usePrompt();
const [prompt2, showPrompt2, isVisible2] = usePrompt();
const [prompt3, showPrompt3, isVisible3] = usePrompt();
function triggerPrompt1() {
showPrompt1((props) => );
}
function triggerPrompt2() {
showPrompt2((props) => );
}
function triggerPrompt3() {
showPrompt3((props) => );
}
return (
Show prompt 1
{prompt1}
Show prompt 2
{prompt2}
Show prompt 3
{prompt3}
);
}
```
---
**[See the full docs](https://useprompt.jonbnewman.dev)**