Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @zhouzi/react-click-outside with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var reactClickOutside = require("@zhouzi/react-click-outside")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@zhouzi/react-click-outside v0.1.0

Listen to clicks happening outside a given container

@zhouzi/react-click-outside

Listen to clicks happening outside a given container. The work here is mostly an update of https://github.com/tj/react-click-outside

Installation

npm install @zhouzi/react-click-outside

Usage

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { useClickOutside } from '@zhouzi/react-click-outside';

function Modal() {
    const [isOpen, setOpen] = React.useState(false);
    const onClickOutside = React.useCallback(() => {
        if (isOpen) {
            setOpen(false);
        }
    }, [isOpen]);

    return (
        <>
            <button onClick={() => setOpen(true)}>
                Open
            </button>
            {isOpen && <div>Modal is open</div>}
        </>
    );
}

ReactDOM.render(
    <Modal />,
    window.document.getElementById('root')
);
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free