2.7.42 • Published 10 days ago

react-select-element v2.7.42

Weekly downloads
70
License
MIT
Repository
github
Last release
10 days ago

react-select-element

React Select Element

react-select-element implements standard HTML <select /> behaviour, without using any <form /> elements. (It can, of course, be composed into other components which implement them.)

You can use it as-is, in which case, there is a Class component (using setState) or a Hooks function component (using Hooks' useState). In the former case, you can extend your own components from it, modifying its behaviour to suit your needs.

There are Storybooks!

npm run storybook

Or, an example implementation is available on GitHub.

While the component appends some className attributes to its elements, the package does not contain any CSS stylesheets. The example implementation contains a simple stylesheet which can help you start your own.

Using ES

The Class component is the default export.

import Select from 'react-select-element'

You can explicitly import the Class component:

import Select from 'react-select-element/class'

Or explicitly import the Hooks function component:

import Select from 'react-select-element/hooks'

Using JS

The Class component is the default export.

const Select = require('react-select-element')

To explicitly import the Class component:

const Select = require('react-select-element/class')

To explicitly import the Hooks component:

const Select = require('react-select-element/hooks')

Implementing in React

Either:

  <Select
    index={this.state.index}
    onChange={(index) => {
      this.setState({ index })
    }}
    tabIndex={0}
    accessKey='S'
    options={[
      { text: 'Letter A' },
      { text: 'Letter B' },
      { text: 'Letter C' },
      { text: 'Letter D' },
      { text: 'Letter E' }
    ]}
  />

Or:

  <Select
    defaultIndex={0}
    tabIndex={0}
    accessKey='S'
    options={[
      { text: 'Letter A' },
      { text: 'Letter B' },
      { text: 'Letter C' },
      { text: 'Letter D' },
      { text: 'Letter E' }
    ]}
  />

Otherwise:

  <Select
    disabled
  />

Finally:

  <Select
    readOnly
  />

Extending the component

1. <InfiniteSelect />

In standard behaviour, when the options are visible, the user can move up and down through the options list by pressing the "arrow up" and "arrow down" keys on their keyboard. Movement will stop at the first item or the last item.

You want to modify that behaviour.

By pressing the "arrow up" key, the user should move through each item to the first item in the list; then, by pressing again, they should move to the last item.

Similarly, by pressing the "arrow down" key, the user should move through each item to the last item in the list; then, pressing again, they should move to the first item.

To achieve this, you can extend the component and override two of its methods.

class InfiniteSelect extends Select {
  incrementActiveIndex () {
    const { activeIndex } = this.state
    const incremented = activeIndex + 1

    this.activeIndex(
      (incremented > this.upperBound) ? this.lowerBound : incremented
    )
  }

  decrementActiveIndex () {
    const { activeIndex } = this.state
    const decremented = activeIndex - 1

    this.activeIndex(
      (decremented < this.lowerBound) ? this.upperBound : decremented
    )
  }
}

There are Storybooks!

npm run storybook

Or, an example implementation is available on GitHub. Clone that repository, install and start the package, then look for the example titled Infinite Select Component.

2. <SelectSelect />

In standard behaviour, controlling components are only notified of a change to the selected index on click or keyboard enter events.

You want to modify that behaviour.

You want controlling components to be notified of a change whenever the the "arrow up" or "arrow down" keys are pressed. (In effect, each option is selected when the user moves through the list.)

To achieve this, you can extend the component and modify the same two methods as before.

class SelectSelect extends Select {
  incrementActiveIndex () {
    super.incrementActiveIndex()

    const { activeIndex } = this.state

    this.selectIndex(
      Math.min(activeIndex + 1, this.upperBound)
    )
  }

  decrementActiveIndex () {
    super.decrementActiveIndex()

    const { activeIndex } = this.state

    this.selectIndex(
      Math.max(activeIndex - 1, this.lowerBound)
    )
  }
}

Invoking super.incrementActiveIndex() or super.decrementActiveIndex() in the overriding method ensures that existing behaviour remains unchanged, while the additional statements modify the behaviour of the component.

There are Storybooks!

npm run storybook

Or, an example implementation is available on GitHub. Clone that repository, install and start the package, then look for the example titled Select Select Component.

3. <HiddenSelect />

react-select-element does not use any <form /> elements.

You want to compose it into a <form />.

In this case, you've chosen to compose the <Select /> into a controlling component which renders the text of the selected option into the value attribute of an <input type='hidden' /> element.

class HiddenSelect extends Component {
  state = {}

  handleIndexChange = (index) => {
    const { options, onChange } = this.props
    const { text } = options[index]

    this.setState({ value: text })
    onChange(index)
  }

  render () {
    const { value } = this.state

    return (
      <div className='hidden-select'>
        <Select
          {...this.props}
          onChange={this.handleIndexChange}
        />
        <input name='hidden-select' type='hidden' value={value} />
      </div>
    )
  }
}

HiddenSelect.propTypes = {
  ...Select.propTypes,
  onChange: PropTypes.func
}

HiddenSelect.defaultProps = {
  ...Select.defaultProps,
  onChange: () => {}
}

There are Storybooks!

npm run storybook

Or, an example implementation is available on GitHub. Clone that repository, install and start the package, then look for the example titled Hidden Select Component.

classnamesnanoid
@everything-registry/sub-chunk-2610
2.7.42

10 days ago

2.7.40

14 days ago

2.7.41

13 days ago

2.7.39

17 days ago

2.7.38

21 days ago

2.7.37

22 days ago

2.7.36

23 days ago

2.7.35

28 days ago

2.7.34

29 days ago

2.7.33

1 month ago

2.7.32

1 month ago

2.7.31

1 month ago

2.7.30

2 months ago

2.7.29

2 months ago

2.7.28

2 months ago

2.7.27

2 months ago

2.7.26

2 months ago

2.7.25

2 months ago

2.7.24

2 months ago

2.7.23

2 months ago

2.7.22

3 months ago

2.7.21

3 months ago

2.7.20

3 months ago

2.7.19

3 months ago

2.7.18

3 months ago

2.7.17

3 months ago

2.7.16

3 months ago

2.7.15

3 months ago

2.7.14

3 months ago

2.7.13

3 months ago

2.7.11

3 months ago

2.7.12

3 months ago

2.7.10

3 months ago

2.7.9

3 months ago

2.7.8

3 months ago

2.7.7

4 months ago

2.7.6

4 months ago

2.7.4

4 months ago

2.7.5

4 months ago

2.7.3

4 months ago

2.7.2

4 months ago

2.7.1

4 months ago

2.7.0

4 months ago

2.6.34

4 months ago

2.6.33

4 months ago

2.6.32

4 months ago

2.6.31

4 months ago

2.6.30

5 months ago

2.6.29

5 months ago

2.6.28

5 months ago

2.6.27

5 months ago

2.6.26

5 months ago

2.6.7

7 months ago

2.6.6

7 months ago

2.6.9

7 months ago

2.6.8

7 months ago

2.6.19

6 months ago

2.6.15

6 months ago

2.6.16

6 months ago

2.6.17

6 months ago

2.6.18

6 months ago

2.6.11

7 months ago

2.6.12

7 months ago

2.6.13

7 months ago

2.6.14

6 months ago

2.6.10

7 months ago

2.6.22

5 months ago

2.6.23

5 months ago

2.6.24

5 months ago

2.6.25

5 months ago

2.6.20

6 months ago

2.6.21

5 months ago

2.6.1

8 months ago

2.6.0

8 months ago

2.6.3

8 months ago

2.6.2

8 months ago

2.6.5

7 months ago

2.6.4

7 months ago

2.5.22

8 months ago

2.5.23

8 months ago

2.5.6

9 months ago

2.5.5

9 months ago

2.5.8

9 months ago

2.5.7

9 months ago

2.5.9

9 months ago

2.5.0

10 months ago

2.5.2

10 months ago

2.5.1

10 months ago

2.5.4

9 months ago

2.5.3

9 months ago

2.0.199

12 months ago

2.0.198

12 months ago

2.0.197

12 months ago

2.0.196

12 months ago

2.0.195

12 months ago

2.0.194

12 months ago

2.5.18

8 months ago

2.5.19

8 months ago

2.5.14

8 months ago

2.5.15

8 months ago

2.5.16

8 months ago

2.5.17

8 months ago

2.5.10

9 months ago

2.5.11

9 months ago

2.5.12

9 months ago

2.5.13

9 months ago

2.5.21

8 months ago

2.5.20

8 months ago

2.0.209

11 months ago

2.0.208

11 months ago

2.0.218

10 months ago

2.0.217

10 months ago

2.0.216

10 months ago

2.0.215

10 months ago

2.0.214

10 months ago

2.0.213

11 months ago

2.0.212

11 months ago

2.0.211

11 months ago

2.0.210

11 months ago

2.0.219

10 months ago

2.0.224

10 months ago

2.0.223

10 months ago

2.0.222

10 months ago

2.0.221

10 months ago

2.0.220

10 months ago

2.0.207

11 months ago

2.0.206

11 months ago

2.0.205

11 months ago

2.0.204

11 months ago

2.0.203

11 months ago

2.0.202

12 months ago

2.0.201

12 months ago

2.0.200

12 months ago

2.0.79

1 year ago

2.0.77

1 year ago

2.0.78

1 year ago

2.0.75

1 year ago

2.0.76

1 year ago

2.0.73

1 year ago

2.0.74

1 year ago

2.0.88

1 year ago

2.0.89

1 year ago

2.0.86

1 year ago

2.0.87

1 year ago

2.0.84

1 year ago

2.0.85

1 year ago

2.0.82

1 year ago

2.0.83

1 year ago

2.0.80

1 year ago

2.0.81

1 year ago

2.0.99

1 year ago

2.0.97

1 year ago

2.0.98

1 year ago

2.0.95

1 year ago

2.0.96

1 year ago

2.0.93

1 year ago

2.0.94

1 year ago

2.0.91

1 year ago

2.0.92

1 year ago

2.0.90

1 year ago

2.0.191

12 months ago

2.0.190

12 months ago

2.0.193

12 months ago

2.0.192

12 months ago

2.0.179

1 year ago

2.0.178

1 year ago

2.0.177

1 year ago

2.0.176

1 year ago

2.0.175

1 year ago

2.0.174

1 year ago

2.0.173

1 year ago

2.0.172

1 year ago

2.0.171

1 year ago

2.0.170

1 year ago

2.0.180

1 year ago

2.0.189

12 months ago

2.0.188

12 months ago

2.0.187

12 months ago

2.0.186

12 months ago

2.0.185

12 months ago

2.0.184

12 months ago

2.0.183

12 months ago

2.0.182

12 months ago

2.0.181

1 year ago

2.0.159

1 year ago

2.0.158

1 year ago

2.0.157

1 year ago

2.0.156

1 year ago

2.0.155

1 year ago

2.0.154

1 year ago

2.0.152

1 year ago

2.0.151

1 year ago

2.0.150

1 year ago

2.0.169

1 year ago

2.0.168

1 year ago

2.0.167

1 year ago

2.0.166

1 year ago

2.0.165

1 year ago

2.0.164

1 year ago

2.0.163

1 year ago

2.0.162

1 year ago

2.0.161

1 year ago

2.0.160

1 year ago

2.0.139

1 year ago

2.0.138

1 year ago

2.0.137

1 year ago

2.0.135

1 year ago

2.0.134

1 year ago

2.0.133

1 year ago

2.0.132

1 year ago

2.0.131

1 year ago

2.0.130

1 year ago

2.0.149

1 year ago

2.0.148

1 year ago

2.0.147

1 year ago

2.0.146

1 year ago

2.0.145

1 year ago

2.0.144

1 year ago

2.0.143

1 year ago

2.0.142

1 year ago

2.0.141

1 year ago

2.0.140

1 year ago

2.0.109

1 year ago

2.0.119

1 year ago

2.0.118

1 year ago

2.0.117

1 year ago

2.0.116

1 year ago

2.0.115

1 year ago

2.0.114

1 year ago

2.0.113

1 year ago

2.0.112

1 year ago

2.0.111

1 year ago

2.0.110

1 year ago

2.0.129

1 year ago

2.0.128

1 year ago

2.0.127

1 year ago

2.0.126

1 year ago

2.0.125

1 year ago

2.0.124

1 year ago

2.0.123

1 year ago

2.0.122

1 year ago

2.0.121

1 year ago

2.0.120

1 year ago

2.0.108

1 year ago

2.0.107

1 year ago

2.0.106

1 year ago

2.0.105

1 year ago

2.0.104

1 year ago

2.0.103

1 year ago

2.0.102

1 year ago

2.0.101

1 year ago

2.0.100

1 year ago

2.0.15

2 years ago

2.0.16

2 years ago

2.0.13

2 years ago

2.0.14

2 years ago

2.0.11

2 years ago

2.0.12

2 years ago

2.0.10

2 years ago

1.6.262

2 years ago

1.6.261

2 years ago

2.0.19

2 years ago

2.0.17

2 years ago

2.0.18

2 years ago

2.0.26

2 years ago

2.0.27

2 years ago

2.0.24

2 years ago

2.0.25

2 years ago

2.0.22

2 years ago

2.0.23

2 years ago

2.0.20

2 years ago

2.0.21

2 years ago

1.6.257

2 years ago

2.0.28

2 years ago

2.0.29

2 years ago

2.0.37

1 year ago

2.0.3

2 years ago

2.0.38

1 year ago

2.0.2

2 years ago

2.0.35

1 year ago

2.0.5

2 years ago

2.0.36

1 year ago

2.0.33

1 year ago

2.0.7

2 years ago

2.0.34

1 year ago

2.0.6

2 years ago

2.0.31

1 year ago

2.0.9

2 years ago

2.0.32

1 year ago

2.0.8

2 years ago

2.0.30

2 years ago

2.0.1

2 years ago

2.0.39

1 year ago

2.0.48

1 year ago

2.0.49

1 year ago

2.0.46

1 year ago

2.0.47

1 year ago

2.0.44

1 year ago

2.0.45

1 year ago

2.0.42

1 year ago

2.0.43

1 year ago

2.0.40

1 year ago

2.0.41

1 year ago

2.0.59

1 year ago

2.0.57

1 year ago

2.0.58

1 year ago

2.0.55

1 year ago

2.0.56

1 year ago

2.0.53

1 year ago

2.0.54

1 year ago

2.0.51

1 year ago

2.0.52

1 year ago

2.0.50

1 year ago

2.0.68

1 year ago

2.0.69

1 year ago

2.0.66

1 year ago

2.0.67

1 year ago

2.0.64

1 year ago

2.0.65

1 year ago

2.0.62

1 year ago

2.0.63

1 year ago

2.0.60

1 year ago

2.0.61

1 year ago

2.0.71

1 year ago

2.0.72

1 year ago

2.0.70

1 year ago

1.7.2

2 years ago

1.7.1

2 years ago

1.7.0

2 years ago

1.6.237

2 years ago

1.6.236

2 years ago

1.6.239

2 years ago

1.6.238

2 years ago

1.6.240

2 years ago

1.6.242

2 years ago

1.6.241

2 years ago

1.6.246

2 years ago

1.6.228

2 years ago

1.6.227

2 years ago

1.6.229

2 years ago

1.6.231

2 years ago

1.6.230

2 years ago

1.6.233

2 years ago

1.6.232

2 years ago

1.6.235

2 years ago

1.6.234

2 years ago

1.6.249

2 years ago

1.6.250

2 years ago

1.6.226

2 years ago

1.6.225

2 years ago

1.6.215

2 years ago

1.6.214

2 years ago

1.6.217

2 years ago

1.6.216

2 years ago

1.6.219

2 years ago

1.6.218

2 years ago

1.6.220

2 years ago

1.6.222

2 years ago

1.6.221

2 years ago

1.6.224

2 years ago

1.6.223

2 years ago

1.6.204

2 years ago

1.6.203

2 years ago

1.6.206

2 years ago

1.6.205

2 years ago

1.6.208

2 years ago

1.6.207

2 years ago

1.6.209

2 years ago

1.6.211

2 years ago

1.6.210

2 years ago

1.6.213

2 years ago

1.6.212

2 years ago

1.6.190

2 years ago

1.6.192

2 years ago

1.6.191

2 years ago

1.6.194

2 years ago

1.6.193

2 years ago

1.6.196

2 years ago

1.6.195

2 years ago

1.6.198

2 years ago

1.6.197

2 years ago

1.6.199

2 years ago

1.6.181

2 years ago

1.6.183

2 years ago

1.6.182

2 years ago

1.6.185

2 years ago

1.6.184

2 years ago

1.6.187

2 years ago

1.6.186

2 years ago

1.6.189

2 years ago

1.6.188

2 years ago

1.6.200

2 years ago

1.6.202

2 years ago

1.6.201

2 years ago

1.6.180

2 years ago

1.6.174

2 years ago

1.6.176

2 years ago

1.6.175

2 years ago

1.6.178

2 years ago

1.6.177

2 years ago

1.6.179

2 years ago

1.6.170

2 years ago

1.6.172

2 years ago

1.6.171

2 years ago

1.6.173

2 years ago

1.6.159

2 years ago

1.6.161

2 years ago

1.6.160

2 years ago

1.6.163

2 years ago

1.6.162

2 years ago

1.6.165

2 years ago

1.6.164

2 years ago

1.6.167

2 years ago

1.6.166

2 years ago

1.6.169

2 years ago

1.6.168

2 years ago

1.6.149

2 years ago

1.6.148

2 years ago

1.6.150

2 years ago

1.6.152

2 years ago

1.6.151

2 years ago

1.6.154

2 years ago

1.6.153

2 years ago

1.6.156

2 years ago

1.6.155

2 years ago

1.6.158

2 years ago

1.6.157

2 years ago

1.6.141

2 years ago

1.6.143

2 years ago

1.6.142

2 years ago

1.6.145

2 years ago

1.6.144

2 years ago

1.6.147

2 years ago

1.6.146

2 years ago

1.6.138

2 years ago

1.6.137

2 years ago

1.6.139

2 years ago

1.6.140

2 years ago

1.6.136

2 years ago

1.6.116

2 years ago

1.6.115

2 years ago

1.6.118

2 years ago

1.6.117

2 years ago

1.6.119

2 years ago

1.6.121

2 years ago

1.6.120

2 years ago

1.6.123

2 years ago

1.6.122

2 years ago

1.6.125

2 years ago

1.6.124

2 years ago

1.6.105

2 years ago

1.6.104

2 years ago

1.6.107

2 years ago

1.6.106

2 years ago

1.6.109

2 years ago

1.6.108

2 years ago

1.6.110

2 years ago

1.6.112

2 years ago

1.6.111

2 years ago

1.6.114

2 years ago

1.6.113

2 years ago

1.6.101

2 years ago

1.6.100

2 years ago

1.6.103

2 years ago

1.6.102

2 years ago

1.6.80

2 years ago

1.6.82

2 years ago

1.6.81

2 years ago

1.6.84

2 years ago

1.6.83

2 years ago

1.6.86

2 years ago

1.6.85

2 years ago

1.6.88

2 years ago

1.6.87

2 years ago

1.6.89

2 years ago

1.6.91

2 years ago

1.6.90

2 years ago

1.6.93

2 years ago

1.6.95

2 years ago

1.6.94

2 years ago

1.6.97

2 years ago

1.6.96

2 years ago

1.6.99

2 years ago

1.6.98

2 years ago

1.6.127

2 years ago

1.6.126

2 years ago

1.6.129

2 years ago

1.6.128

2 years ago

1.6.71

2 years ago

1.6.70

2 years ago

1.6.73

2 years ago

1.6.72

2 years ago

1.6.75

2 years ago

1.6.74

2 years ago

1.6.77

2 years ago

1.6.76

2 years ago

1.6.79

2 years ago

1.6.78

2 years ago

1.6.130

2 years ago

1.6.132

2 years ago

1.6.131

2 years ago

1.6.134

2 years ago

1.6.133

2 years ago

1.6.135

2 years ago

1.6.46

3 years ago

1.6.48

2 years ago

1.6.47

2 years ago

1.6.49

2 years ago

1.6.51

2 years ago

1.6.50

2 years ago

1.6.53

2 years ago

1.6.52

2 years ago

1.6.55

2 years ago

1.6.54

2 years ago

1.6.57

2 years ago

1.6.56

2 years ago

1.6.59

2 years ago

1.6.58

2 years ago

1.6.60

2 years ago

1.6.62

2 years ago

1.6.61

2 years ago

1.6.64

2 years ago

1.6.63

2 years ago

1.6.66

2 years ago

1.6.65

2 years ago

1.6.68

2 years ago

1.6.67

2 years ago

1.6.69

2 years ago

1.6.40

3 years ago

1.6.42

3 years ago

1.6.41

3 years ago

1.6.44

3 years ago

1.6.43

3 years ago

1.6.45

3 years ago

1.6.37

3 years ago

1.6.36

3 years ago

1.6.39

3 years ago

1.6.38

3 years ago

1.6.35

3 years ago

1.6.34

3 years ago

1.6.31

3 years ago

1.6.33

3 years ago

1.6.32

3 years ago

1.6.20

3 years ago

1.6.22

3 years ago

1.6.21

3 years ago

1.6.24

3 years ago

1.6.23

3 years ago

1.6.26

3 years ago

1.6.25

3 years ago

1.6.28

3 years ago

1.6.27

3 years ago

1.6.29

3 years ago

1.6.30

3 years ago

1.6.19

3 years ago

1.6.17

3 years ago

1.6.18

3 years ago

1.6.15

3 years ago

1.6.16

3 years ago

1.6.14

3 years ago

1.6.13

4 years ago

1.6.12

4 years ago

1.6.11

4 years ago

1.6.9

5 years ago

1.6.8

5 years ago

1.6.7

5 years ago

1.6.5

5 years ago

1.6.4

5 years ago

1.6.3

6 years ago

1.6.2

7 years ago

1.6.1

7 years ago

1.6.0

7 years ago

1.5.9

7 years ago

1.5.8

7 years ago

1.5.7

7 years ago

1.5.6

7 years ago

1.5.5

7 years ago

1.5.4

7 years ago

1.5.3

7 years ago

1.5.1

7 years ago

1.5.0

7 years ago

1.1.2

7 years ago

1.1.1

7 years ago

1.1.0

7 years ago

1.0.5

8 years ago

1.0.4

8 years ago

1.0.3

8 years ago

1.0.2

8 years ago

1.0.1

8 years ago