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-hook-popup

v1.1.0

Published

Easily manage popups like alerts and modals in React with a single hook

Downloads

531

Readme

React Hook Popup

React Hook Popup is a lightweight Javascript and Typescript library to easily manage popups in React with a single hook. Display alerts, modals, snackbars, and more from anywhere in your React application without needing to manage your own open/closed state or crowd your components' JSX with popups.

Installation

npm install react-hook-popup

Basic Usage

React Hook Popup is completely centered around one single, simple to use hook: usePopup. It can be imported like

import { usePopup } from 'react-hook-popup';

Any component that uses this hook must appear below the <PopupProvider> component in the tree. You probably want to wrap your whole application in this component.

import { PopupProvider } from 'react-hook-popup';
<PopupProvider>
    <YourApplication />
</PopupProvider>

The usePopup hook takes two arguments:

  • A string key that is unique to each popup.
  • A function that returns JSX to render the popup.

The hook returns a function to show that popup, and a function to it.

const [showPopup, hidePopup] = usePopup('alert', () => (
    <div className="alert">
        This is an alert!
    </div>
));
<button onClick={showPopup}>Show Alert</button>

In the above example, clicking the button to call showPopup will display the alert. That's it! However, React Hook Popup provides functionality for more advanced and dynamic popups which you can read about below.

Render Props

In a style similar to the render props pattern, the function that renders the popup provides access to a few utility values and functions that can be used within the popup to make it more dynamic. These include

  • message: Used to display a dynamic content inside of the popup. This content is set via an argument to the showPopup function, as shown below.
  • handleClose: A function to close the popup from within its own JSX.
const [showPopup, hidePopup] = usePopup('popup', ({ message, handleClose }) => (
    <div className="modal">
        {message}
        <button onClick={handleClose}>
            Close this modal
        </button>
    </div>
));
<button onClick={() => showPopup('I am a modal!')}>
    Show the modal
</button>

Promise-Based Confirmations

React hook popup allows you to easily show confirm popups in a similar fashion to the browser's built in confirm function - however, React hook gives you a promise that will resolve to a boolean based on the user's action in the confirmation popup. See the example below.

const [confirm] = usePopup('confirm', ({ message, confirm, cancel }) => (
    <div className="confirm-modal">
        Are you sure?
        <button onClick={confirm}>Confirm</button>
        <button onClick={cancel}>Cancel</button>
    </div>
));
const confirmed = await confirm();
if (confirmed) {
    // do something...
} else {
    // do something else...
}

Reusability

Popups created through the usePopup hook can be easily defined once and shared accross the entire application by writing your own custom hooks. For example, you could create your own useAlert and import it everywhere to get access to that alert.

// useAlert.jsx
export function useAlert('alert', ({ message, handleClose }) => (
    // ...your alert JSX
));
// SomeComponent.jsx
import { useAlert } from 'useAlert';

export const SomeComponent = () => {
    const [alert] = useAlert();
    return (
        <button onClick={() => alert('hello')}>Alert</button>
    );
};
// SomeOtherComponent.jsx
import { useAlert } from 'useAlert';

export const SomeOtherComponent = () => {
    const [alert] = useAlert();
    return (
        <button onClick={() => alert('world!')}>Alert</button>
    );
};

UI Component Library Integration

Using react-hook-popup with any 3rd party component library, such as material-ui, react-bootstrap, or semantic-ui, is incredibly simple! Because it gives you the ability to render whatever JSX you want for the popup, you can simply render a 3rd party component. For example...

import { Snackbar } from '@material-ui/core';
import { usePopup } from 'react-hook-popup';
const [alert] = usePopup('snackbar-alert', ({ message, handleClose }), () => (
    <Snackbar open autoHideDuration={6000} onClose={handleClose}>
        <Alert onClose={handleClose} severity="success">
            This is a success message!
        </Alert>
    </Snackbar>
));

*Note that any UI components you use should be set to open, because react-hook-popup manages the display state for you.

Built In Popups

react-hook-popup provides a couple of simple, lightweight built in popups that you can import quickly without having to define any JSX or styling yourslef. These popups can be imported as hooks, and include

  • useSnackBar

    import { useSnackBar } from 'react-hook-popup';
    
    // ...
    
    const [showSnackbar] = useSnackBar();
    
    // ...
    
    showSnackBar('There was an error!');

    This hook can also take an optional options argument, which is an object including the fields

    key: string : override the default internal key used by the hook if necessary

    variant: 'error' | success' | 'info' | 'warning' : pre defined styling to apply to the snackbar (DEFAULT: 'info')

    timeout: number : milliseconds to timeout and close the alert automatically. (DEFAULT: 5000)


  • useAlert
    import { useAlert } from 'react-hook-popup';
    
    // ...
    
    const [alert] = useAlert();
    
    // ...
    
    alert('There was an error!');