@acrool/react-dropdown
v3.0.20
Published
Dropdown list with React Component
Downloads
149
Maintainers
Readme
Acrool React Dropdown
Features
- Supports two themes (light/dark)
- Support multiple selection function
- Support groups options
- Support avatar display
- Support search search function
- Support value custom type (string, number, boolean, object...)
- Support accessibility (keyboard Tab, Arrow Top, Bottom, Enter)
Install
yarn add @acrool/react-dropdown
Usage
add in your index.tsx
import "@acrool/react-dropdown/dist/index.css";
then in your page
import {Dropdown, DropdownMulti} from '@acrool/react-dropdown';
const Example = () => {
const [value, setValue] = useState<string|null>('');
const [multiValue, setMultiValue] = useState<Array<string|null>|null>(null);
const renderDropdown = () => {
const options = [
{text: 'Jack Wu', value: '1'},
{text: 'Imagine Chiu', value: '2'},
{text: 'Jason Dinwiddie', value: '3'},
{text: 'Gloria Lu', value: '4'},
];
return <Dropdown value={value} onChange={setValue} options={options}/>;
}
const renderDropdownMulti = () => {
const options = [
{text: 'Select option item...', value: '', avatarUrl: ''},
{text: 'Jack Wu', value: '1', avatarUrl: asset('/images/avatar/female-1.jpg')},
{text: 'Imagine Chiu', value: '2', avatarUrl: asset('/images/avatar/female-2.jpg')},
{text: 'Jason Dinwiddie', value: '3', avatarUrl: asset('/images/avatar/female-3.jpg')},
{text: 'Gloria Lu', value: '4', avatarUrl: asset('/images/avatar/female-4.jpg')},
];
return <DropdownMulti value={multiValue} onChange={setMultiValue} options={options2} isDark/>;
}
return (
<>
{renderDropdown()}
{renderDropdownMulti()}
</>
);
};
Options
if need use null
value, options type
{
"compilerOptions": {
"strictNullChecks": false
}
}
There is also a example that you can play with it:
License
MIT © imagine10255