Skip to content
This repository has been archived by the owner on Sep 9, 2020. It is now read-only.

elsangedy/use-downshift

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

use-downshift

MIT License downloads PRs Welcome

Installation

$ yarn add use-downshift
# or
$ npm i use-downshift

Usage

import React from 'react'

import useDownshift from 'use-downshift'

const items = [
  {value: 'apple'},
  {value: 'pear'},
  {value: 'orange'},
  {value: 'grape'},
  {value: 'banana'},
]

function MyComponent() {
  const {
    isOpen,
    getRootProps,
    getMenuProps,
    getItemProps,
    getLabelProps,
    getInputProps,
    highlightedIndex,
    inputValue,
    selectedItem
  } = useDownshift({
    onChange: selection => alert(`You selected ${selection.value}`),
    itemToString: item => (item ? item.value : '')
  })

  return (
    <div {...getRootProps()}>
      <label {...getLabelProps()}>{label}</label>
      <input {...getInputProps({ placeholder: 'search...' })} />
      {isOpen && (
        <ul {...getMenuProps()}>
          {items
            .filter(item => !inputValue || item.value.includes(inputValue))
            .map((item, index) => (
              <li
                {...getItemProps({
                  key: index,
                  item,
                  style: {
                    background: highlightedIndex === index ? 'lightgray' : 'white',
                    fontWeight: selectedItem === item ? 'bold' : 'normal',
                  }
                })}
              >
                {item.value}
              </li>
            ))}
        </ul>
      )}
    </div>
  )
}

export default MyComponent

Roadmap

  • move to ts
  • tests
  • ci/cd
  • semantic-release
  • docs
  • all-contributors

Inspiration

downshift

LIENSE

MIT