2.3.0 • Published 1 month ago
react-dialog-async v2.3.0
React Dialog Async
React Dialog Async provides a simple hook-based API for managing dialog state in React apps.
- ✅ CSS Framework agnostic - works with any component library or CSS setup
- ✅ Lightweight with zero dependencies
- ✅ Written in Typescript
- ✅ Supports both React and React Native
Quick Start
This example demonstrates how to create a simple dialog that asks the user a question and logs their response to the console:
// 1. Wrap your app with DialogProvider
<DialogProvider>
<App />
</DialogProvider>
// 2. Create a dialog component
const QuestionDialog = ({ data, open, handleClose }) => {
if (!open) return null; // Don't render if the dialog is closed
return (
<div className={'dialog'}>
<p>{data.question}</p>
<button onClick={() => handleClose("No")}>No</button>
<button onClick={() => handleClose("Yes")}>Yes</button>
</div>
)
};
// 3. Use the useDialog hook to show the dialog
const App = () => {
const questionDialog = useDialog(QuestionDialog);
const handleClick = async () => {
const response = await questionDialog.show({
// pass data to the dialog
question: "Do you like apples?"
});
console.log(response) // Will be either "Yes" or "No"
};
return (
<button onClick={handleClick}>
Ask me a question
</button>
);
};
Contributing
Contributions are more than welcome!
If you have a use-case that the library currently doesn't support please raise it in an issue or pull request 😄
2.3.0
1 month ago
2.2.0
2 months ago
2.1.1
2 months ago
2.0.2
2 months ago
2.1.0
2 months ago
2.0.1
2 months ago
2.0.0
2 months ago
1.3.3
7 months ago
1.3.2
7 months ago
1.3.1
8 months ago
1.2.1
2 years ago
1.2.0
3 years ago
1.1.1
3 years ago
1.1.0
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago