@patrissoljuns/react-click-outside v1.0.0

Welcome to @patrissoljuns/react-click-outside 🎉

Looking for an easy and efficient way to handle click-away interactions in your React application? Look no further! Introducing @patrissoljuns/react-click-outside, a lightweight and powerful package that offers a hassle-free solution for handling click-away events in React applications. Whether you're working on dropdowns, modals, or any other UI components that need to close when a user interacts outside of them, this package has got your back.

🔥 Features

• Versatile: Support for both functional components (hooks) and class components. Choose the method that works best for you!
• Flexible: Customizable event types (click, mousedown, mouseup, keydown, touchstart, etc.)
• Scoped: Define the target element or document where the event listeners will be attached, making it ideal for restricting click-away detection to a particular section or container in your application.
• Optimized: Streamlined event handling and clean-up ensure top-notch performance and silky-smooth user experiences.
• Type-safe: Crafted with TypeScript for built-in type safety.

📦 Installation

npm install @patrissoljuns/react-click-outside
# or
yarn add @patrissoljuns/react-click-outside

🚀 Usage

Declarative Component

Here's a simple example of using the ClickOutsideListener component to close a dropdown menu:

import React, { useState } from 'react';
import ClickOutsideListener from '@patrissoljuns/react-click-outside';

const MyComponent = () => {
  const [dropdownOpen, setDropdownOpen] = useState(false);

  const handleClickOutside = () => {
    setDropdownOpen(false);
  };

  const toggleDropdown = () => {
    setDropdownOpen(!dropdownOpen);
  };

  return (
    <div>
      <button onClick={toggleDropdown}>Toggle Dropdown</button>
      {dropdownOpen && (
        <ClickOutsideListener onClickOutside={handleClickOutside}>
          <div className="dropdown">
            {/* Dropdown content */}
            Click outside this element to close it!
          </div>
        </ClickOutsideListener>
      )}
    </div>
  );
};

useClickOutsideListener Hook

Alternatively, you can use the useClickAwayListener hook to programmatically handle click-away events

import React, { useState } from 'react';
import { useClickOutsideListener } from '@patrissoljuns/react-click-outside';

const ExampleComponent = () => {
  const [showDrawer, setShowDrawer] = useState(false);
  
  const containerRef = useClickOutsideListener<HTMLDivElement>({
    onClickOutside: () => setShowDrawer(false), 
    events: ['keydown', 'touchstart']
  });

  return (
    <div ref={containerRef}>
      <button onClick={() => setShowDrawer(true)}>Toggle drawer</button>
      {showDrawer && <div>My beautiful drawer</div>}
    </div>
  );
};

📚 API

useClickOutsideListener

ClickOutsideListener

Same with useClickOutsideListener above plus the following:

📖 Examples

import React, { useState } from 'react';
import ClickOutsideListener, { UseClickOutsideListenerOptions } from '@patrissoljuns/react-click-outside';

const App = () => {
    const [isModalOpen, setIsModalOpen] = useState(false);

    const closeModal: UseClickOutsideListenerOptions['onClickOutside'] = (event) => {
        if (event instanceof KeyboardEvent && (event.key === 'p' || event.key === 'Escape')) {
            setIsModalOpen(false);
        }
    };

    const openModal = () => {
        setIsModalOpen(true);
    };

    return (
        <div>
            <button onClick={openModal}>Open Modal</button>
            {isModalOpen && (
                <ClickOutsideListener onClickOutside={closeModal} events={['keydown']}>
                    <div className="modal">
                        <h2>Modal Title</h2>
                        <p>Modal content...</p>
                    </div>
                </ClickOutsideListener>
            )}
        </div>
    );
};

export default App;

import React, {useState} from 'react';
import useClickOutsideListener from "@patrissoljuns/react-click-outside";
import { Button, Popover, MenuList, MenuItem } from '@mui/material';

const MuiPopoverExample: React.FC = () => {
    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);

    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = () => {
        setAnchorEl(null);
    };

    const open = Boolean(anchorEl);
    const id = open ? 'popover-example' : undefined;

    return (
        <div>
            <Button variant="contained" color="primary" onClick={handleClick}>
                Open Popover
            </Button>

            <Popover
                id={id}
                open={open}
                anchorEl={anchorEl}
                onClose={() => null}
                anchorOrigin={{
                    vertical: 'bottom',
                    horizontal: 'center',
                }}
                transformOrigin={{
                    vertical: 'top',
                    horizontal: 'center',
                }}
            >
                <ClickOutsideListener
                    onClickOutside={handleClose}
                    events={['keyup']}
                >
                    <MenuList id="my-menu">
                        <MenuItem onClick={handleClose}>Option 1</MenuItem>
                        <MenuItem onClick={handleClose}>Option 2</MenuItem>
                        <MenuItem onClick={handleClose}>Option 3</MenuItem>
                    </MenuList>
                </ClickOutsideListener>
            </Popover>
        </div>
    );
};

import React, { useState } from 'react';
import useClickOutsideListener from '@patrissoljuns/react-click-outside';
import { Button, Typography, Card } from 'antd';

const TouchPanelExample: React.FC = () => {
    const [isOpen, setIsOpen] = useState(false);

    const handleOpen = () => {
        setIsOpen(true);
    };

    const handleClose = () => {
        setIsOpen(false);
    };

    const panelRef = useClickOutsideListener({
        onClickOutside: handleClose,
        events: ['touchstart'],
    });

    return (
        <div>
            <Button type="primary" onClick={handleOpen}>
                Open Panel
            </Button>
            {isOpen && (
                <div
                    style={{
                        position: 'absolute',
                        top: '50%',
                        left: '50%',
                        transform: 'translate(-50%, -50%)',
                    }}
                    ref={panelRef}
                >
                    <Card title="Touch Panel" bordered={false}>
                        <Typography.Text>
                            Touch anywhere outside this panel to close it.
                        </Typography.Text>
                    </Card>
                </div>
            )}
        </div>
    );
};

🙌 Contributing

We welcome your contributions! To get started, follow these steps:

1. Fork the repository and create a new branch for your changes.
2. Install the necessary dependencies by running npm install or yarn install.
3. Make your changes, ensuring that they adhere to the project's coding standards.
4. Test your changes by running the appropriate test command (e.g., npm test or yarn test). You may also update tests.
5. Submit a pull request for your changes, and we'll review them as soon as possible.

📄 License

MIT © Patrissol KENFACK