react-new-input

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

Name	Bundle Size
react-new-input	gzip 21.1kB (https://bundlephobia.com/result?p=react-new-input)
react-select (competitor)	gzip 26.1kb (https://bundlephobia.com/result?p=react-select)

Property Defaults

Name	Default Value
onChange	undefined
onBlur	noop
onFocus	noop
name	undefined
selection	[]
options	[]
placeholder	'Select...'
multiple	false
disabled	false
creatable	false
removable	true
appendToBody	false
rightToLeft	false
allowDuplicates	true
alwaysReturnArray	false
filterOptions	filterOptions
massageDataIn	massageDataIn
massageDataOut	massageDataOut
optionKeys	['value', 'label']
checkRadioMaxCount	10
parseTo	string
Text Props
text_placeholder	''
text_noOptions	'No Options'
text_create	'Create'
Component Props
component_Select	Select
component_CheckRadio	CheckRadio
component_CheckBox	CheckBox
component_Radio	Radio
component_Switch	Switch
component_HtmlFieldData	HtmlFieldData
component_Wrapper	Wrapper
component_Selection	Selection
component_SelectionList	SelectionList
component_OptionList	OptionList
component_Option	Option
component_Search	Search
component_SelectionWrapper	SelectionWrapper
component_OptionsWrapper	OptionsWrapper
component_AppendToBodyOptionsWrapper	AppendToBodyOptionsWrapper
component_StyledAppendToBodyOptionsWrapper	StyledAppendToBodyOptionsWrapper
SVG Props
svg_Checkmark	Checkmark
svg_Remove	Remove
svg_Expand	Expand
Style Props
styles_fontSize	'1em'
styles_borderRadius	'.2em'
styles_paddingTop	'.25em'
styles_paddingBottom	'.25em'
styles_paddingLeft	'.25em'
styles_paddingRight	'.25em'
styles_selection_paddingTop	'.2em'
styles_selection_paddingBottom	'.2em'
styles_selection_paddingLeft	'.4em'
styles_selection_paddingRight	'.4em'
styles_selection_margin	'.2em'
styles_option_paddingTop	'.25em'
styles_option_paddingBottom	'.25em'
styles_option_paddingLeft	'.25em'
styles_option_paddingRight	'.25em'
styles_checkRadio_borderWidth	'2px'
styles_checkRadio_marginBetween	'1em'
styles_checkRadio_labelMargin	'.2em'
styles_checkRadio_paddingTop	'.2em'
styles_checkRadio_paddingBottom	'.2em'
styles_checkRadio_paddingLeft	'.2em'
styles_checkRadio_paddingRight	'.2em'
styles_search_size	5
styles_icon_width	'1em'
styles_colors_primary	'black'
styles_colors_secondary	'#C3C3C3'
styles_colors_highlight	'lightblue'
styles_colors_warning	'#FABAAC'
styles_colors_warningBold	'#FA2222'
styles_colors_disabled	'#ECECEC'
styles_colors_background	'white'

Property Descriptions

Name	Description
onChange	Event when selection changes
onBlur	Event when focus is lost
onFocus	Event when focus is gained
name	The HTML name in the form
selection	The currently selected items
options	The options to choose from
placeholder	The placeholder of the search field
multiple	Whether multiple items can be selected
disabled	Whether component is disabled
creatable	Whether new selected items can be created
removable	Whether selected items are removable
appendToBody	Whether options append to the body tag (can prevent options from being clipped)
rightToLeft	Whether to show text from right to left instead
allowDuplicates	Whether duplicate selection items are allowed
alwaysReturnArray	Always return an array from onChange, instead of only when multiple
filterOptions	The function which filters options based on search text
massageDataIn	The function that massages the props coming in
massageDataOut	The function massaging the selection returned from the onChange event
optionKeys	The name of the keys in an option object
checkRadioMaxCount	The maximum radio buttons allowed before rendering a Select instead
parseTo	parse value from onChange to a js type: string, number, int, float, boolean
Text Props
text_placeholder	Same as placeholder with a more descriptive name
text_noOptions	The text shown when there are no options
text_create	The text shown when a new selection can be created
Component Props
component_Select	Multi/Single select component
component_CheckRadio	Groups checkbox and radio components
component_CheckBox	Checkbox component
component_Radio	Radio button component
component_Switch	On/Off switch component
component_HtmlFieldData	Hidden component which keeps current selection in the HTML form
component_Wrapper	Wraps the entire select component
component_Selection	Component showing one selected item
component_SelectionList	List of selected items
component_OptionList	List of options
component_Option	Component showing one option
component_Search	Component responsable for the search text
component_SelectionWrapper	Displays everything for the Select except the options
component_OptionsWrapper	Wraps the OptionList
component_AppendToBodyOptionsWrapper	Appends the OptionList to body tag
component_StyledAppendToBodyOptionsWrapper	Styleable version of AppendToBodyOptionsWrapper wrapped inside of it
SVG Props
svg_Checkmark	The checkmark image
svg_Remove	The remove image
svg_Expand	the expand image
Style Props
styles_fontSize	Controls the entire size of the component
styles_borderRadius	The amount of curve of the border
styles_paddingTop	The padding top
styles_paddingBottom	The padding bottom
styles_paddingLeft	The padding left
styles_paddingRight	The padding right
styles_selection_paddingTop	The selection's padding top
styles_selection_paddingBottom	The selection's padding bottom
styles_selection_paddingLeft	The selection's padding left
styles_selection_paddingRight	The selection's padding right
styles_selection_margin	The selection's margin
styles_option_paddingTop	The option's padding top
styles_option_paddingBottom	The option's padding bottom
styles_option_paddingLeft	The option's padding left
styles_option_paddingRight	The option's padding right
styles_checkRadio_borderWidth	The border width for checkbox, radio, and switch
styles_checkRadio_marginBetween	The margin between radios and checkboxes
styles_checkRadio_labelMargin	The margin between the label and it's radio/checkbox/switch
styles_checkRadio_paddingTop	The padding top for radio/checkbox/switch group
styles_checkRadio_paddingBottom	The padding bottom for radio/checkbox/switch group
styles_checkRadio_paddingLeft	The padding left for radio/checkbox/switch group
styles_checkRadio_paddingRight	The padding right for radio/checkbox/switch group
styles_search_size	The size of the search component
styles_icon_width	The width of all icon/SVGs
styles_colors_primary	The primary color used
styles_colors_secondary	The secondary color used
styles_colors_highlight	The color of a highlighted option
styles_colors_warning	The color of remove selection background
styles_colors_warningBold	The color of the remove selection icon
styles_colors_disabled	The color for disabled elements
styles_colors_background	The background color used