react-dialog-router
v1.0.4
Published
The React Dialog Router is a versatile component that simplifies the management of dialogs within your React application. It provides a context-based approach to open, close, and navigate between dialogs. This README specifies its abilities and the functi
Downloads
5
Readme
React Dialog Router
The React Dialog Router is a versatile component that simplifies the management of dialogs within your React application. It provides a context-based approach to open, close, and navigate between dialogs. This README specifies its abilities and the functions available from the useDialogs
hook.
Playground
Here is a codesandbox
Installation
You can install the React Dialog Router component using npm or yarn:
npm install react-dialog-router
# or
yarn add react-dialog-router
Usage
To use the React Dialog Router, you first need to import DialogRouterProvider and add it to your root app. Here's an example of how to set it up:
//App.js
import { DialogRouterProvider } from 'react-dialog-router';
import { DialogComponent, DialogComponent2 } from './dialogs';
const dialogs = {
'DIALOG_NAME': DialogComponent,
'DIALOG_NAME_2': DialogComponent2
};
function App() {
return (
<DialogRouter dialogs={dialogs}>
{/* Your application content */}
</DialogRouter>
);
}
Abilities
The React Dialog Router provides the following abilities:
Open a Dialog: You can open a dialog by calling the openDialog function provided by the useDialogs hook.
Close the Last Dialog: You can close the last opened dialog by calling the closeLastDialog function provided by the useDialogs hook.
Close All Dialogs: You can close all open dialogs by calling the closeAll function provided by the useDialogs hook.
Navigate Back to a Specific Dialog: You can navigate back to a specific dialog by calling the goBackToName function provided by the useDialogs hook and passing the dialog name.
Open a Secondary Dialog: You can open a secondary dialog using the openSecondaryDialog function provided by the useDialogs hook.
Close the Secondary Dialog: You can close the secondary dialog by calling the closeSecondaryDialog function provided by the useDialogs hook.
Functions Available from useDialogs
openDialog(dialogConfig: Object)
Opens a new dialog based on the provided dialogConfig. The dialogConfig should contain at least a name property that corresponds to the name of the dialog component to be opened.
closeLastDialog()
Closes the last opened dialog.
closeAll()
Closes all open dialogs, including secondary dialogs.
goBackToName(dialogName: string)
Navigates back to the specified dialog by closing all dialogs that follow it in the history.
openSecondaryDialog(dialogConfig: Object)
Opens a secondary dialog based on the provided dialogConfig.
closeSecondaryDialog()
Closes the secondary dialog.
withDialogs
Higher-Order Component (HOC)
You can wrap your components with the withDialogs HOC to inject the dialogContext prop, which allows you to access the dialog-related functions within your component.
import { withDialogs } from 'react-dialog-router';
const MyComponent = ({ dialogContext }) => {
// Access dialog functions using dialogContext
const { openDialog, closeLastDialog } = dialogContext;
return (
// Your component JSX
);
};
Example
Here's an example of how to use the React Dialog Router to open a dialog:
import React from 'react';
import { useDialogs } from 'react-dialog-router'; // Replace with the actual path
function MyButton() {
const { openDialog } = useDialogs();
const handleOpenDialog = () => {
openDialog({ name: 'DIALOG_NAME', props: { /* dialog props */ } });
};
return (
<button onClick={handleOpenDialog}>Open Dialog</button>
);
}
export default withDialogs(MyComponent);