npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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);