Skip to content

Latest commit

 

History

History
107 lines (74 loc) · 3.46 KB

USE_POP_OVER.md

File metadata and controls

107 lines (74 loc) · 3.46 KB

usePopOver

Custom React hook for managing a PopOver component.

Table of Contents

  • Type Definitions
  • Functions
  • Custom Hook
  • Usage

Type Definitions

Position

The position of the Pop-over (default: { x: 0, y: 0 }).

Parameter Type Description
x string The position on the x-axis.
y string The position on the y-axis.

PopOverOptions

The options for the usePopOver hook.

Parameter Type Description
id string The ID attribute for the Pop-over.
className string The CSS class name for the Pop-over.
position Position The position of the Pop-over (default: { x: 0, y: 0 }).
closeOnClickOutside boolean Flag to control if the Pop-over should be closed when clicked outside (default: true).

HandleMouseDown

The function to handle the mouse down event.

Parameter Type Description
event React.MouseEvent<HTMLElement, MouseEvent> The mouse down event object.

OpenPopOver

The function to open the PopOver component.

ClosePopOver

The function to close the PopOver component.

TogglePopOver

The function to toggle the state of PopOver component between open and closed.

PopOverHook

An object containing Pop-over component-related functions and state.

Parameter Type Description
PopOver React.Component The React component for rendering the Pop-over portal.
openPopOver OpenPopOver The function to open the PopOver component.
closePopOver ClosePopOver The function to close the PopOver component.
togglePopOver TogglePopOver The function to toggle PopOver component visibility.

usePopOver(PopOverOptions) => PopOverHook

Custom React hook for managing a Pop-over component.

Parameter Type Description
options PopOverOptions The options for the Pop-over hook.

Returns: PopOverHook - An object containing Pop-over component-related functions and state.

Usage

import usePopOver from './usePopOver';

const MyComponent = () => {
  const { PopOver, togglePopOver, closePopOver } = usePopOver({
    id: 'my-popover',
    className: 'popover',
    closeOnClickOutside: true,
    position: { x: '10px', y: '10px' },
  });

  const handleToggle = () => {
    togglePopOver();
  };

  const handleClose = () => {
    closePopOver();
  };

  return (
    <div>
      <button onClick={handleToggle}>Toggle Popover</button>
      <button onClick={handleClose}>Close Popover</button>
      <PopOver>
        <div>Popover Content</div>
      </PopOver>
    </div>
  );
};