https://github.com/surinderlohat/react-dialog

Easy can and clean way to show dialogs in react application
https://github.com/surinderlohat/react-dialog

Last synced: about 1 month ago
JSON representation

Easy can and clean way to show dialogs in react application

• Host: GitHub
• URL: https://github.com/surinderlohat/react-dialog
• Owner: surinderlohat
• Created: 2022-05-12T12:35:09.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-05-13T08:21:18.000Z (over 2 years ago)
• Last Synced: 2024-12-04T19:49:17.036Z (about 2 months ago)
• Size: 1.95 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Dialog

Show Dialogs with easy way in react JS, super easy to use and can handel all the major user cases.

##### Based on the React hooks and reactive programing.

#### No extra dependencies pure react js code & lightweight.

## Features

1. useDialog Hook to show dialogs in functional components.

3. use dialog from any UI library i.e MUI/bootstrap  or any other UI library

2. Open source Free to use.

## Installation

```sh

npm install @surinderlohat/react-dialog

or

yarn add @surinderlohat/react-dialog

```

## How to use

- Add Dialog Provider

App.tsx

```sh

import { FC } from 'react';

import { DialogProvider } from '@surinderlohat/react-dialog';

import BootstrapDialog from './BootstrapDialog';

import MUIDialog from './MUIDialog';

// App.tsx

const App: FC = () => {

  return (

    

      

      

    

  );

};

export default App;

```

- Import Use Dialog Hook that's it 

  #### MUI Dialog Example :

```sh

import { FC } from 'react';

import { Box, Button, Dialog, DialogTitle } from '@mui/material';

import { useDialog } from '@surinderlohat/react-dialog';

const MuiDialog: FC = () => {

  const dialog = useDialog();

  // Show MUI Dialog

  const showMuiDialog = () => {

    dialog.openDialog(

       dialog.closeDialog()}>

        MUI Dialog Example

        
Welcome to react dialog

      

    );

  };


  return (

    

      SHOW MUI DIALOG 

    

  );

};

export default MuiDialog;

```

 #### Bootstrap Dialog Example :

```sh

import { FC } from 'react';

import { useDialog } from '@surinderlohat/react-dialog';

import { Modal, Button } from 'react-bootstrap';

import 'bootstrap/dist/css/bootstrap.min.css';

const BootstrapDialog: FC = () => {

  const dialog = useDialog();

  // Show Bootstrap Dialog

  const showBootstrapDialog = () => {

    dialog.openDialog(

      

        

          Bootstrap Dialog Example

        

        

          
Modal body text goes here.

        

        

           dialog.closeDialog()}>

            Close

          

          Save changes

        

      

    );

  };


  return (

    


      Show Dialog

    

  );

};


export default BootstrapDialog;

```

## License

MIT **Free Software!**