@auraxy/react-select
v3.1.6
Published
A react select component
Downloads
112
Readme
@auraxy/react-select
pkg.module supported
, which means that you can apply tree-shaking in you project
A react select component
Installation
npm i -S @auraxy/react-select
Global name - The variable the module exported in umd
bundle
ReactSelect
Interface
See what method or params you can use in index.d.ts
Usage
import React from 'react'
import { SelectBase, Cascader, SelectBaseOption } from '@auraxy/react-select'
import 'node_modules/@livelybone/react-popper/lib/css/index.scss'
import 'node_modules/react-perfect-scrollbar/dist/css/styles.css'
import 'node_modules/@auraxy/react-select/lib/css/index.scss'
const Options = [
{ label: 'place 1', value: 1, children: [{ label: 'child 1', value: 1 }] },
{ label: 'place 2', value: 2 },
{ label: 'place 3', value: 3 },
{ label: 'place 4', value: 4 },
{ label: 'place 5', value: 5 },
{ label: 'place 6', value: 6 },
{ label: 'place 7', value: 7 },
{ label: 'place 8', value: 8 },
{ label: 'place 9', value: 9 },
{ label: 'place 10', value: 10 },
{ label: 'place 11', value: 11 },
{ label: 'place 12', value: 12 },
{ label: 'place 13', value: 13 },
{ label: 'place 14', value: 14 },
{ label: 'place 15', value: 15 },
{ label: 'place 16', value: 16 },
{ label: 'place 17', value: 17 },
]
const Page = () => {
const [value, set] = React.useState('')
const [options, setOptions] = React.useState(Options)
return (
<div>
{/*SelectBase*/}
<SelectBase
value={value}
options={options}
scrollBarProps={{
style: {
maxHeight: '50vh',
},
}}
onChange={set}
onSearch={ev => {
const value = ev.target.value
setOptions(Options.filter(op => op.label.includes(value)))
}}
>
extra content
</SelectBase>
{/*SelectBase with SelectBaseOption*/}
<SelectBase
value={value}
scrollBarProps={{
style: {
maxHeight: '50vh',
},
}}
onChange={set}
onSearch={ev => {
const value = ev.target.value
setOptions(Options.filter(op => op.label.includes(value)))
}}
>
{options.map(op => <SelectBaseOption {...op}>{op.label}</SelectBaseOption>)}
extra content
</SelectBase>
{/*Cascader*/}
<Cascader
options={options}
scrollBarProps={{
style: {
maxHeight: '50vh',
},
}}
onChange={set}
onSearch={ev => {
const value = ev.target.value
setOptions(Options.filter(op => op.label.includes(value)))
}}
/>
</div>
)
}
Use in html, see what your can use in CDN: unpkg
<-- use what you want -->
<script src="https://unpkg.com/@auraxy/react-select/lib/umd/<--module-->.js"></script>
style
For building style, you may need to import the css or scss file:
// scss
import 'node_modules/@auraxy/react-select/lib/css/index.scss'
// css
import 'node_modules/@auraxy/react-select/lib/css/index.css'
Or
// scss
@import 'node_modules/@auraxy/react-select/lib/css/index.scss';
// css
@import 'node_modules/@auraxy/react-select/lib/css/index.css';
Or, you can build your custom style by copying, editing and importing node_modules/@auraxy/react-select/lib/css/index.scss
Warning: You should import the scrollbar css and react-popper css manually
Due to the index.css did not contain the css of scrollbar css and react-popper css, you should import them manually in your project
import 'node_modules/@livelybone/react-popper/lib/css/index.scss'
import 'node_modules/react-perfect-scrollbar/dist/css/styles.css'
Or
@import 'node_modules/@livelybone/react-popper/lib/css/index.scss';
@import 'node_modules/react-perfect-scrollbar/dist/css/styles.css';
QA
- Error
Error: spawn node-sass ENOENT
You may need install node-sass globally,
npm i -g node-sass