How to create a popup menu in React that closes on clicking outside (module)

#nextjs #react #cra #webdev

So here you are, you want to make your popup in your website but you can't find a good tutorial on how to do that. Fear not, your friendly neighborhood react developer is here to save the day.

First things first, we are gonna use an external npm module to make things easier.

yarn add react-click-away-listener

npm i react-click-away-listener

Now, on to the syntax:

You can find additional docs here: Link

import { useState ) from 'react';
import ClickAwayListener from 'react-click-away-listener';

const App = () => {
    const [popup, setPopup] = useState(false)
    return (
        {/* The option to open the popup */}
        <button onClick={() => setPopup(true)}>Click Me</button>
        {/* The popup itself */}
        {popup && (
            <ClickAwayListener onClickAway={() => setPopup(false)}>
                    <div className={'popup'}>
                        <li>Items of the Popup</li>
                        <li>Items of the Popup</li>
                        <li>Items of the Popup</li>
                    </div>
            </ClickAwayListener>
        )}
    )
};

There you have it, that's basically how you can make a click away listening popup in react. I have excluded the styling portion for this article, but I'll be sure to write up on it soon.