stream-chat-react/dist/components/MessageActions/hooks/useMessageActionsBoxPopper.js

React components to create chat conversations or livestream style chat

import { useEffect, useRef } from 'react';
import { usePopper } from 'react-popper';
export function useMessageActionsBoxPopper({ open, placement, referenceElement, }) {
    const popperElementRef = useRef(null);
    const { attributes, styles, update } = usePopper(referenceElement, popperElementRef.current, {
        modifiers: [
            {
                name: 'eventListeners',
                options: {
                    // It's not safe to update popper position on resize and scroll, since popper's
                    // reference element might not be visible at the time.
                    resize: false,
                    scroll: false,
                },
            },
        ],
        placement,
    });
    useEffect(() => {
        if (open) {
            // Since the popper's reference element might not be (and usually is not) visible
            // all the time, it's safer to force popper update before showing it.
            update?.();
        }
    }, [open, update]);
    return {
        attributes,
        popperElementRef,
        styles,
    };
}