react-new-input v2.3.11

Demo with Storybook

https://brennemankyle.github.io/react-new-input/

Features

A robust multi-select that automatically uses Radios, Checkboxes, or a Switch if they'll fit on one line

• Deterministic even with dynamic/live prop updates
• Completely customizable: replace any internal component, styling, icon, text, or search filter by changing props
• Automatically uses Radios, Checkboxes, or a Switch if it fits on one line (updates on live screen resizes)
• Search using fuzzy matching: mossisippi > Mississippi, py > Pi. Powered by https://glench.github.io/fuzzyset.js/
• Fully usable with only the Keyboard
• Creatable options (managed by a prop not a separate component)
• Selectable Option Groups (parent group can be selected)
• Small npm package size
• No Jquery
• Modern browser support: Chrome, Safari, Edge, Firefox, iOS, Android
• And much more!

Install

npm install react-new-input

// Example File
import React, { useState } from 'react'
import NewInput from 'react-new-input'

// With React Function/Hooks
let SomeHook = () => {
  const [selection, setSelection] = useState()
  let options = [
    {value: '1', label: 'Option 1'},
    {value: '2', label: 'Option 2'},
  ]

  return <NewInput
    name="example"
    selection={selection}
    onChange={(e) => setSelection(e.target.value)}
    options={options} />
}

// OR With React Component
class SomeComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {selection}
    this.options = [
      {value: '1', label: 'Option 1'},
      {value: '2', label: 'Option 2'},
    ]
  }

  onChange(e) {
    this.setState({
      selection: e.target.value
    })
  }

  render() {
    return <NewInput
      name="example"
      selection={this.state.selection}
      onChange={this.onChange}
      options={this.options} />
  }
}

Comparison

Property Defaults

Property Descriptions