@gernotpokorny/use-awaitable-component
v1.0.2
Published
React hook for awaiting component callback.
Downloads
6
Maintainers
Readme
@gernotpokorny/use-awaitable-component
React hook for awaiting component callback.
Installation
npm
npm install @gernotpokorny/use-awaitable-component
Usage
import { useState } from "react";
import useAwaitableComponent from "@gernotpokorny/use-awaitable-component";
import "./styles.css";
function Modal({ visible, onSubmit, onCancel }) {
const [text, setText] = useState("");
const display = visible ? "block" : "none";
const handleSubmit = () => {
onSubmit(text);
setText("");
};
const handleCancel = () => {
onCancel(":)");
};
return (
<div className="modal" style={{ display }}>
<div className="modal-head">This is a modal</div>
<div className="modal-body">
<input
placeholder="Type something here..."
value={text}
onChange={(e) => setText(e.target.value)}
/>
<button onClick={handleSubmit}>Submit</button>
</div>
<button className="modal-close" onClick={handleCancel}>
X
</button>
</div>
);
}
export default function App() {
const [status, execute, resolve, reject, reset] = useAwaitableComponent();
const showModal = status === "awaiting";
const handleAwaitModal = async () => {
try {
const value = await execute();
alert(`VALUE: ${value}`);
} catch (err) {
alert(`Canceled: ${err}`);
} finally {
reset();
}
};
return (
<div className="App">
<div className="button-container">
<button disabled={showModal} onClick={handleAwaitModal}>
{showModal ? "Waiting..." : "Show Modal"}
</button>
</div>
<Modal visible={showModal} onSubmit={resolve} onCancel={reject} />
</div>
);
}
Reference
const [status, execute, resolve, reject, reset] = useAwaitableComponent<T>();
| Field | Type | Descriptions |
|--|--|--|
| status
| 'idle' \| 'awaiting' \| 'resolved' \| 'rejected'
| Current awaitable component status |
| execute
| () => Promise<T>
| A function to start execution |
| resolve
| (val?: T) => void
| A callback to call after component completed without error |
| reject
| (err?: any) => void
| A callback to call after component completed with error |
| reset
| () => void
| A function to reset status back to idle
. This function must be called before calling execute()
again. |