Need private packages and team management tools?Check out npm Teams »

react-new-input

2.3.11 • Public • Published

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

Install

npm i react-new-input

DownloadsWeekly Downloads

5

Version

2.3.11

License

ISC

Unpacked Size

440 kB

Total Files

125

Last publish

Collaborators

  • avatar