Dialog component for React
This project will no longer receive any updates.
npm install --save @nick46000/react-dialog
or
yarn add @nick46000/react-dialog1. Add an element with id 'dialog' to the body of your template file.
public/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- HEAD CONTENT -->
</head>
<body>
<!-- OTHER BODY CONTENT -->
<div id="root"></div>
<div id="dialog"></div>
<!-- OTHER BODY CONTENT -->
</body>
</html>2. Wrap your application with DialogProvider and add DialogComponent. Import the css file.
src/index.tsx:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { DialogProvider, DialogComponent } from '@nick46000/react-dialog';
import '@nick46000/react-dialog/dist/dialog/DialogComponent.css';
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
<DialogProvider>
<App />
<DialogComponent />
</DialogProvider>,
);3. Use the useDialog hook in any component (this example will use App.tsx).
import React, { useCallback } from 'react';
import { useDialog } from '@nick46000/react-dialog';
function App() {
const { openDialog } = useDialog();
const handleClick = useCallback(async () => {
const result = await openDialog('Are you sure?');
if (result.confirmed) {
// User confirmed
} else {
// User cancelled
}
}, [openDialog]);
return (
<div className="App">
<button onClick={handleClick}>Open dialog</button>
</div>
);
}
export default App;You can find further details in the Documentation
👤 nimec01
- Github: @nimec01
This component is inspired by Alexander Rusev's article on creating a custom confirm dialog.
Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.
Give a ⭐️ if this project helped you!
Copyright © 2022 nimec01.
This project is MIT licensed.
This README was generated with ❤️ by readme-md-generator