Now Paging Maciej

    This package has been deprecated

    Author message:

    Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

    use-downshift

    0.2.6 • Public • Published

    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

    Keywords

    none

    Install

    npm i use-downshift

    DownloadsWeekly Downloads

    1

    Version

    0.2.6

    License

    MIT

    Unpacked Size

    258 kB

    Total Files

    9

    Last publish

    Collaborators

    • elsangedy