How to use Virtual Select with React?

[sa-si-dev]

How to use Virtual Select with React?

[sa-si-dev]

1. Install the Virtual Select from NPM.

npm i virtual-select-plugin

2. Create a wrapper component for Virtal Select

import React from 'react';

import 'virtual-select-plugin/dist/virtual-select.min.css';
import 'virtual-select-plugin/dist/virtual-select.min.js';

export default class VirtualSelect extends React.Component {
  componentDidMount() {
    window.VirtualSelect.init({
      ele: this.ele,
      ...this.props,
    });

    if (typeof this.props.onChange === 'function') {
      this.ele.addEventListener('change', this.props.onChange);
    }
  }

  componentWillUnmount() {
    this.ele.destroy();
  }

  render() {
    return <div ref={(ele) => (this.ele = ele)} />;
  }
}

3. Import the wrapper component and use it as any normal form fields.

import React from 'react';
import VirtualSelect from './virtual-select';

export default class SampleForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = { value: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    console.log('New value: ', this.state.value);
  }

  render() {
    const options = [
      { label: 'Options 1', value: '1' },
      { label: 'Options 2', value: '2' },
      { label: 'Options 3', value: '3' },
    ];

    return (
      <form onSubmit={this.handleSubmit}>
        <VirtualSelect
          options={options}
          onChange={this.handleChange}
          search="true"
        />
        <button>Submit</button>
      </form>
    );
  }
}