use-dropdown
v1.0.0
Published
useDropdown hook for react applications
Downloads
20
Maintainers
Readme
useDropdown
Intent
Dropdown behaviour is pretty common and is reimplemented over and over again any time you need a slightly different dropdown. What this package simply does is extract the most common behaviour into a small react hook, so you can only implement the appearance.
Install
$ npm i use-dropdown
Usage example
import React from 'react';
import useDropdown from 'use-dropdown';
const Select = function () {
const [containerRef, isOpen, open, close] = useDropdown();
return (
<div className="select-container" ref={containerRef}>
<Input onFocus={open} />
{isOpen && (
<SelectOptions>
<Option>First option</Option>
<Option>Second option</Option>
<Option>Third option</Option>
</SelectOptions>
)}
<button onClick={close}>
Close select
</button>
</div>
);
};
The hook will observe clicks outside the container (this is what the containerRef
is for) and close the dropdown when they happen.
The close-on-click-outside feature will not work if you don't set the containerRef
to what you consider the container of your dropdown.
This is pretty much all you need to know to use this hook.
Requirements
- React^16.8
License
MIT