Wondering what’s next for npm?Check out our public roadmap! »

    @dmitriig/react-select
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.0 • Public • Published

    React Select

    A react dropdown multiselect component powered by react-virtualized for ability to display a long list of values

    Installation

    yarn add @dmitriig/react-select

    Props

    // Options should be provided as {value,label} pairs 
    export interface IItem {
      value: number,
      label: string
    }
    
    // Component props
    export interface IReactSelectProps {
      // possible options
      options: IItem[],
      // string placeholder
      placeholder: string,
      // callback on selection change
      onChange: (items: IItem[]) => void,
      // custom cell renderer
      rowRenderer?: (item: any, index: number) => void,
      // custom container style
      style?: any,
      // custom input style
      inputStyle?: any,
      // custom list dropdown style
      listStyle?: any,
      // custom list row height
      listRowHeight?: number,
      // custom input font size
      inputFontSize?: number,
      // custom message for no search results
      noResultsMessage?: string
      // controlled selection array
      selection?: IItem[]
    }

    Usage

    Basic
    // Format data into value and label pair
    const options = [];
    for (let i = 0; i < 10000; i++) {
      options.push({
        value: i,
        label: Math.random().toString(36).substring(7)
      })
    }
    
    return <ReactSelect options={options} placeholder="Select something.."
                     onChange={(items)=>console.log(items)}/>

    Demo: https://codesandbox.io/embed/hopeful-jang-zzv8e?fontsize=14

    Controlled
    function Controlled(props) {
      const {options} = props;
      // use an initial selection
      const [selection] = React.useState(options.slice(0, index));
      const [flag, setFlag] = React.useState(false);
    
      // dynamically update the selection  
      function handleAdd() {
        selection.push(options[index++]);
        setFlag(!flag);
      }
    
      // dynamically update the selection
      function handleRemove() {
        selection.splice(0, 1);
        setFlag(!flag);
      }
    
      return <div style={{padding: '20px 20px'}}>
        <div>
          <div style={styles.button} onClick={handleAdd}>
            Add a token
          </div>
          <div style={styles.button} onClick={handleRemove}>
            Remove a token
          </div>
        </div>
        <ReactSelect options={options} placeholder="Select something.." selection={selection}
                     onChange={action('changed')}/>
      </div>
    }

    Keywords

    none

    Install

    npm i @dmitriig/react-select

    DownloadsWeekly Downloads

    62

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    26.2 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar