Skip to content
This repository has been archived by the owner on Apr 5, 2024. It is now read-only.
/ react-dialog Public archive

Dialog component for React

License

Notifications You must be signed in to change notification settings

nimec01/react-dialog

Repository files navigation

Welcome to @nick46000/react-dialog 👋

Maintenance Version Documentation License: MIT

Dialog component for React

Status

This project will no longer receive any updates.

Install

npm install --save @nick46000/react-dialog
or
yarn add @nick46000/react-dialog

Usage

1. 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;

Documentation

You can find further details in the Documentation

Author

👤 nimec01

This component is inspired by Alexander Rusev's article on creating a custom confirm dialog.

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2022 nimec01.
This project is MIT licensed.


This README was generated with ❤️ by readme-md-generator