react-popover-hook v1.0.3

react-popover-hook

• No extraneous DOM, gives you complete style control
• Ultra lightweight ~ 1 kB (gzip)
• Good a11y support
• TypeScript

Usage

const App = () => {
    const [open, trigger, content] = usePopover(false)
    return (
        <div>
            <button {...trigger}>Trigger</button>
            {open && <div {...content}>Popover content</div>}
        </div>
    )
}

API

const [open, trigger, content] = usePopover(false)

usePopover takes a boolean for it's default open/close state.

The return value is an array with 3 items. Like the useState build-in hook, this allow you to name these items per your usecase.

For demo purpose we will name and refer to these items as open, trigger and content.

open

boolean value indicating the open/close state of the popover

trigger

An object containing the props for the trigger Component. it can be directly spreaded on the Component being used as trigger of the popover.

<button {...trigger}>Click to open</button>

! important ! popover content position will be calculated by using the trigger position.

content

An object containing the props for the Component that contains the popover's content. it can be directly spreaded on the Component that contains the popover's content.

<div {...content}>
    <p>Whatever content</p>
</div>

! important ! popover content position will be calculated by using the trigger position.