@kubit-ui-web/react-components/dist/esm/hooks/useClickOutside/samples/useClickOutside.sample.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import { useClickOutside } from '../useClickOutside';
const C_BLACK = 'black';
const C_RED = 'red';
export const UseClickOutsideSample = () => (_jsx("div", { style: {
        height: 300,
        width: 300,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
    }, children: _jsx(WithHookComponent, {}) }));
const WithHookComponent = () => {
    const ref = React.useRef(null);
    const [backgroundColor, setBackgroundColor] = React.useState(C_BLACK);
    const onClickOutside = React.useCallback(() => setBackgroundColor(prevState => (prevState === C_BLACK ? C_RED : C_BLACK)), [setBackgroundColor]);
    useClickOutside(ref, onClickOutside);
    return (_jsx("div", { ref: ref, style: {
            height: 100,
            width: 100,
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            textAlign: 'center',
            color: 'white',
            backgroundColor,
        }, children: "Click outside me" }));
};
//# sourceMappingURL=useClickOutside.sample.js.map