use-prompt

use-prompt is a React Hook 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
2. Typescript
3. Examples
   • Basic example
   • Async/await and try/catch
   • Multiple sequential prompts
   • Multiple concurrent prompts
   • Persistant prompts
   • Render control

Installation

npm i use-prompt

yarn add use-prompt

API

const [prompt, showPrompt, visible, clearPrompt] = usePrompt(
  options?: {
    persist?: boolean;
  }
): [RenderedPrompt, ShowPrompt, IsVisible, ClearPrompt]

See the API Details page for more information.

Basic example

The following demonstrates a very basic example use of usePrompt.

import usePrompt from 'use-prompt';

function App() {
  const [prompt, showPrompt, visible] = usePrompt();

  function showMyPrompt() {
    showPrompt(({ resolve }) => (
      <>
        <div>She sells seashells by the seashore.</div>
        <button onClick={resolve}>Ok thanks</button>
      </>
    ));
  }

  return (
    <div>
      <button onClick={showMyPrompt} disabled={visible}>
        Show prompt
      </button>
      {prompt}
    </div>
  );
}

Async/await and try/catch

Use async/await and try/catch in order to retrieve what the users response within the prompt was:

import { useState } from 'react';
import usePrompt from 'use-prompt';

function App() {
  const [prompt, showPrompt, visible] = usePrompt();
  const [cancelReason, setCancelReason] = useState(null);
  const [confirmResponse, setConfirmResponse] = useState(null);

  async function showMyPrompt() {
    try {
      const response = await showPrompt(({ resolve, reject }) => (
        <>
          <div>Are you sure?</div>
          <button onClick={() => reject('clicked cancel')}>Cancel</button>
          <button onClick={() => resolve('clicked yes')}>Yes</button>
        </>
      ));
      setConfirmResponse(response);
    } catch (reason) {
      setCancelReason(reason);
    }
  }

  return (
    <>
      <button onClick={showMyPrompt} disabled={visible}>
        Show prompt
      </button>
      {prompt}
      {confirmResponse && `Prompt was confirmed: ${confirmResponse}`}
      {cancelReason && `Prompt was cancelled: ${cancelReason}`}
    </>
  );
}

Sequential prompts

Display prompts one after another in a sequential manner:

import usePrompt from 'use-prompt';

function Prompt({ resolve, message }) {
  return (
    <>
      <div>{message}</div>
      <button onClick={resolve}>Ok thanks</button>
    </>
  );
}

function App() {
  const [prompt, showPrompt, visible] = usePrompt();

  async function showPrompts() {
    await showPrompt((props) => <Prompt {...props} message="Prompt 1" />);
    await showPrompt((props) => <Prompt {...props} message="Prompt 2" />);
    await showPrompt((props) => <Prompt {...props} message="Prompt 3" />);
  }

  return (
    <div>
      <button onClick={showPrompts} disabled={visible1 || visible2 || visible3}>
        Show prompts
      </button>
      {prompt}
    </div>
  );
}

Multiple concurrent prompts

Display as many prompts concurrently as you want:

import usePrompt from 'use-prompt';

function Prompt({ resolve, message }) {
  return (
    <>
      <div>{message}</div>
      <button onClick={resolve}>Ok thanks</button>
    </>
  );
}

function App() {
  const [prompt1, showPrompt1, visible1] = usePrompt();
  const [prompt2, showPrompt2, visible2] = usePrompt();
  const [prompt3, showPrompt3, visible3] = usePrompt();

  function triggerPrompt1() {
    showPrompt1((props) => <Prompt {...props} message="Prompt1" />);
  }
  function triggerPrompt2() {
    showPrompt2((props) => <Prompt {...props} message="Prompt2" />);
  }
  function triggerPrompt3() {
    showPrompt3((props) => <Prompt {...props} message="Prompt3" />);
  }

  return (
    <div>
      <button onClick={triggerPrompt1} disabled={visible1}>
        Show prompt 1
      </button>
      {prompt1}

      <button onClick={triggerPrompt2} disabled={visible2}>
        Show prompt 2
      </button>
      {prompt2}

      <button onClick={triggerPrompt3} disabled={visible3}>
        Show prompt 3
      </button>
      {prompt3}
    </div>
  );
}

See the full docs