Custom React hook for managing a PopOver
component.
- Type Definitions
- Functions
- Custom Hook
- Usage
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. |
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). |
The function to handle the mouse down event.
Parameter | Type | Description |
---|---|---|
event | React.MouseEvent<HTMLElement, MouseEvent> |
The mouse down event object. |
The function to open the PopOver
component.
The function to close the PopOver
component.
The function to toggle the state of PopOver
component between open
and closed
.
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. |
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.
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>
);
};