vi-select

select component using virtual list - antd special

Install

npm install --save vi-select

Usage

import React from "react";
import {VSelect} from "vi-select";

const array = new Array(100).fill(0).map((_, i) => i);

class App extends React.Component {
  state = {
    value: "02555346"
  };

  onChange = e => {
    console.log("You selected", e);
    this.setState({value: e});
  };

  render() {
    return (
      <VSelect
        dataSource={array}
        onChange={this.onChange}
        style={{width: 300, marginTop: 20}}
        value={this.state.value}
      >
        {item => <p>{item}</p>}
      </VSelect>
    );
  }
}

Props

| Property | Type | Description | | ------------- | ------------------- | ------------------------------------------------------- | | dataSource | any[] | Data source of the select list. | | placeholder | string? | Placeholder of select input. | | value | string \| number? | Value of select. | | onChange | (v?: T) => void? | Call after select changed. | | keyProp | any? | Use to identify which property should be used as value. | | displayProp | any? | Which property should be used to show in the input box. | | style | any? | Style of select container. | | className | string? | Class of select container. | | itemHeight | number? | Height of each list item, default is 32px. | | allowClear | boolean? | Switch for the clear btn. | | disabled | boolean? | Disabled select. | | emptyTpl | ReactNode? | Empty template when not data. |

Development

install dependencies

cd vi-select && yarn

build code

yarn build

see the examples

cd vi-select/example && yarn start

License

MIT © musicq