@nick46000/react-dialog NPM

Dialog component for React

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;