@auraxy/react-select v3.1.6

@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

1. Error Error: spawn node-sass ENOENT

You may need install node-sass globally, npm i -g node-sass