@byteclaw/use-prompt
v1.1.3
Published
React hook and component for prompting the user to input anything using your custom components
Downloads
32
Readme
@Byteclaw/use-prompt
React hook and component for prompting the user to input anything using your custom components.
Installation
npm install @byteclaw/use-prompt
yarn add @byteclaw/use-prompt
Usage
Here is a quick example. answer
accepts any values you want so you aren't limited just to boolean values.
By default application uses global event emitter context created by @byteclaw/use-event-emitter
hook unless you create your own event emitter context.
Shared global event emitter context
import { Prompts, usePrompt } from '@byteclaw/use-prompt';
import React, { useCallback } from 'react';
function Dialog({ onAccept, onReject }) {
return (
<div>
<p>Are you sure?</p>
<button onClick={onAccept}>Yes</button>
<button onClick={onReject}>No</button>
</div>
);
}
function ConfirmButton() {
const [prompt, prompting] = usePrompt();
const onClick = useCallback(async () => {
const result = await prompt(({ answer }) => (
<Dialog onAccept={() => answer(true)} onReject={() => answer(false)} />
));
}, [ask]);
return (
<button disabled={prompting} onClick={onClick}>
Do something
</button>
);
}
function App() {
return (
<>
<ConfirmButton />
<Prompts />
</>
);
}
Custom event emitter context
import {
EventEmitterContext,
useEventEmitterInstance,
} from '@byteclaw/use-event-emitter';
import { Prompts, usePrompt } from '@byteclaw/use-prompt';
import React, { useCallback } from 'react';
function Dialog({ onAccept, onReject }) {
return (
<div>
<p>Are you sure?</p>
<button onClick={onAccept}>Yes</button>
<button onClick={onReject}>No</button>
</div>
);
}
function ConfirmButton() {
const [prompt, prompting] = usePrompt();
const onClick = useCallback(async () => {
const result = await prompt(({ answer }) => (
<Dialog onAccept={() => answer(true)} onReject={() => answer(false)} />
));
}, [ask]);
return (
<button disabled={prompting} onClick={onClick}>
Do something
</button>
);
}
function App() {
const eventEmitter = useEventEmitterInstance();
return (
<EventEmitterContext.Provider value={eventEmitter}>
<ConfirmButton />
<Prompts />
</EventEmitterContext.Provider>
);
}