Neurotic Programmer Masquerade
    Have ideas to improve npm?Join in the discussion! »

    react-select-virtualized-light

    1.0.0 • Public • Published

    react-select-virtualized-light

    Note: This is a fork from react-select-virtualized that imports only needed modules from react-virtualized to reduce the final bundle size

    Alt text

    react-select v3 + react-virtualized + react hooks!

    NPM JavaScript Style Guide

    This project came up after hours of trying to find an autocomplete component that supports large sets of data to be displayed and searched for while maintain performance. The only libraries out there that allow this functionality are either not maintained anymore, use outdated libraries or are poorly performant. I created a component that uses the Airbnb library called react-virtualized for the virtual data loading of elements and plugged it to the react-select (the most used autocomplete library for react) menu list.

    Alt Text

    Install

    npm install --save react-select-virtualized

    Peer Dependencies

    {
        "react",
        "react-dom",
        "react-virtualized",
        "react-select"
    }

    Note

    The select component will be the same from react-select v3 so you will be able to use it with any select you already have.

    Try It!!!

    Edit react-select-virtualized

    Check Storybook for more examples

    What we do support and don't from react-select

    Components: Select, Async, Creatable

    • We support all the UI related props for the input. Extension also.

    • We do not support any related prop to the popup list. We extend it. *Sorry no extension of any component inside the list.*

    • Sorry no multi selection yet. (no isMulti)

    Examples

    Options Shape

    const options = [
      {
        value: 1,
        label: `guiyep`,
      },
      ...
    ];
     
    const opsGroup = [
      { label: `Group Name Header`, options },
      ...
    ]

    Basic

    import React from 'react';
     
    import Select from 'react-select-virtualized';
     
    const Example1 = () => <Select options={options} />;

    Edit react-select-virtualized

    With group

    import React from 'react';
     
    import Select from 'react-select-virtualized';
     
    const Example1 = () => <Select options={opsGroup} grouped />;

    Edit react-select-virtualized

    Usage Async

     
    import React from 'react';
     
    import { Async } from 'react-select-virtualized';
     
    const loadOptions = (input, callback) => {...};
     
    const Example1 = () => <Async loadOptions={loadOptions}/>
     
    const Example2 = () => <Async defaultOptions={options} loadOptions={loadOptions}/>
     
    const Example3 = () => <Async defaultOptions={opsGroup} loadOptions={loadOptions} grouped/>
    Async - No Group

    Edit react-select-virtualized

    Async - Grouped

    Edit react-select-virtualized

    Usage with creatable

    import React from 'react';
     
    import { Creatable } from 'react-select-virtualized';
     
    const Example1 = () => <Creatable options={options} />;

    Edit react-select-virtualized

    Usage with creatable and group

    NOT YET DONE.

    Custom Styles

    For custom styling of the Input component read the react-select documentation.

    The styling in the menu list is by css.

    How to leave the menu open so I can style my menu?

    Set the menuIsOpen prop to true, create an options list with less than 100 elements and use css for adjusting your css.

    Use this example as a guidance

    Edit react-select-virtualized

    Possible classes

    react-select-virtualized grouped-virtualized-list-item flat-virtualized-item fast-option fast-option fast-option-focused fast-option-selected fast-option-create

    Documentation - this are special to this library and none is required

    Toggle
    Props Type Default Description
    grouped boolean false Specify if options are grouped
    formatGroupHeaderLabel function({ label, options}) => component Will render a custom component in the popup grouped header (only for grouped)
    formatOptionLabel (coming from react-select) function(option, { context }) => component Will render a custom component in the label
    optionHeight number 31 Height of each option
    groupHeaderHeight number Header row height in the popover list
    maxHeight (coming from react-select) number auto Max height popover list
    defaultValue option Will set default value and set the component as an uncontrolled component
    value option Will set the value and the component will be a controlled component
    onCreateOption (Only for Creatable) function(option) => nothing Will be executed when a new option is created , it is only for controlled components

    Roadmap

    Toggle
    • useCallback everywhere.
    • Move fast options to group.
    • Fix minimum input search on grouped component.
    • Upgrade alpha version.
    • Review all the TODOs.
    • Improve filtering function in fast-react-select.
      • Improved performance by 50%
    • Add gzip.
    • Review support to all the react-select props. Should all work but multi-val.

    -- v 1.0.0 --

    • Add support to AsyncSelect.

    -- v 1.1.0 --

    • Add support to AsyncSelect with group.

    -- v 1.2.0 --

    • Upgrading packages and hooks.

    -- v 2.0.0 --

    • Adding react-select v3.
    • Fixing addon-info.
    • Remove classnames.
    • Improve packaging.
    • Remove react-hover-observer.
    • Added controlled components support.

    -- v 2.1.0 --

    • Better debouncing

    -- v 2.2.0 --

    • Add support to create element props.
    • Add better error handling.

    -- v 2.3.0 --

    • Move modules to lib.
    • Improve debounce.
    • Move internal state of select and async select to reducer like creatable.
    • Add support to create element props with group.

    -- v 2.4.0 --

    • Add testing so we do not only relay on storybook.

    More from me :)

    my-react-form-state NPM

    This is a React form state management library that works with React/Redux/React-Native.

    License

    MIT © guiyep

    Install

    npm i react-select-virtualized-light

    DownloadsWeekly Downloads

    7

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    57.8 kB

    Total Files

    3

    Last publish

    Collaborators

    • avatar