virtuselect
v1.0.2
Published
this package contains select functionality that includes search and virtualization
Downloads
10
Readme
virtuselect
Introduction
virtuselect
is a React component that allows you to create a select input with search functionality and virtualization. This ensures that only the visible options are rendered, improving performance when dealing with large datasets.
Installation
To use virtuselect
, you can install it via npm or yarn:
npm install virtuselect
or
yarn add virtuselect
Usage
Import
import Select from 'virtuselect';
import Option from 'virtuselect/Option';
import 'virtuselect/lib/select.css';
Props
| Prop | Type | Description |
|-------------|---------------------|----------------------------------------------------------|
| children | ReactNode | The Option
components to be rendered in the select |
| onSelect | function | Callback triggered when an option is selected |
| placeholder | string | Placeholder for the search input |
| width | number (optional) | Width of the select input, default is 320px |
| disabled | boolean (optional) | If true, the select input is disabled |
| value | string | The value of the selected option |
Example
import React, { useState } from "react";
import Select from "virtuselect";
import Option from "virtuselect/Option";
const App = () => {
const [selectedOption, setSelectedOption] = useState(null);
const handleSelect = (option) => {
console.log(option);
setSelectedOption(option);
};
return (
<div className="app-container">
<h1>React Select Component Example</h1>
<Select
onSelect={handleSelect}
value={selectedOption}
placeholder="Select an option..."
width={150} // Optional: specify the width, default is 320px
>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="yiminghe">Yiminghe</Option>
<Option value="option4">Option 4</Option>
<Option value="option5">Option 5</Option>
<Option value="option6">Option 6</Option>
<Option value="option7">Option 7</Option>
<Option value="option8">Option 8</Option>
<Option value="option9">Option 9</Option>
<Option value="option10">Option 10</Option>
<Option value="option11">Option 11</Option>
<Option value="option12">Option 12</Option>
<Option value="option13">Option 13</Option>
<Option value="option14">Option 14</Option>
<Option value="option15">Option 15</Option>
<Option value="option16">Option 16</Option>
<Option value="option17">Option 17</Option>
<Option value="option18">Option 18</Option>
<Option value="option19">Option 19</Option>
<Option value="option20">Option 20</Option>
<Option value="option21">Option 21</Option>
<Option value="option22">Option 22</Option>
<Option value="option23">Option 23</Option>
<Option value="option24">Option 24</Option>
<Option value="option25">Option 25</Option>
<Option value="option26">Option 26</Option>
<Option value="option27">Option 27</Option>
<Option value="option28">Option 28</Option>
<Option value="option29">Option 29</Option>
<Option value="option30">Option 30</Option>
</Select>
<div className="selected-value">
{selectedOption ? `Selected: ${selectedOption}` : "No option selected"}
</div>
</div>
);
};
export default App;
Version
1.0.8
Author
tk0038
License
ISC
This README file includes an introduction, installation instructions, a detailed usage example, and a table of the available props for the `Select` component. This should help users understand how to use your `virtuselect` package effectively.