Repository files navigation

Set of enhancements for input control

The intention of creating this library was to bringinput component out of the dropdown/autocomplete/whatever code, so it could be easily replaced with your custom component, and also to split independent functionality into different components, which could be combined with each other (still not quite sure it was worth it, though).

There are currently five components:

1. <Autosize />
2. <Autocomplete />
3. <Dropdown />
4. <Mask />
5. <DatePicker />

<Combobox /> is a combination ofDropdown,Autosize and/orAutocomplete components.

http://alexkuz.github.io/react-input-enhancements/

• Each component is responsible for a corresponding behaviour (<Autosize> resizes<input> according to it's content length,<Dropdown> adds popup with options, and so on).
• All components acceptfunction as a child, providing props as a first argument, which you should pass to yourinput component. If there is nothing else exceptinput, it could be passed as a child directly (for simplicity).
• If you need to have combined behaviour in your component, let's say<Autosize> with<Autocomplete> just pass<Autocomplete> as a child to<Autosize> (see<Combobox> source code for reference)

All components needs an access to<input> DOM element. To provide it, usegetInputComponent prop:

letinput;getInput(){returninput;}<Autocompleteoptions={options}getInputComponent={getInput}>{props=><inputref={c=>input=c}{...props}/>}</Autocomplete>

Or, if you don't want to store the node in your component:

<Autocompleteoptions={options}>{(props,otherProps,registerInput)=><inputref={c=>registerInput(c)}{...props}/>}</Autocomplete>

The first option also allows you to use shorter form with implicit parameters passing:

letinput;getInput(){returninput;}<Autocompleteoptions={options}getInputComponent={getInput}><inputref={c=>input=c}/></Autocomplete>

However, this is not preferable as there is too much magic happening.

If<input> element wasn't provided, component tries to find node automatically, however this behaviour is deprecated and will be removed in future versions.

Autosize resizes component to fit it's content.

<AutosizedefaultValue={value}minWidth={100}>{(inputProps,{ width, registerInput})=><inputtype='text'{...inputProps}ref={c=>registerInput(c)}/>}</Autosize>

• valuestring - Input value (for a controlled component)
• defaultValuestring - Initial value (for a uncontrolled component)
• getInputElementfunction() - Optional callback that provides<input> DOM element
• registerInputfunction - Registers<input> DOM element
• defaultWidthnumber - Minimum input width

Autocomplete prompts a value based on providedoptions (see alsoreact-autocomplete for the same behaviour)

<AutocompletedefaultValue={value}options={options}>{(inputProps,{ matchingText, value, registerInput})=><inputtype='text'{...inputProps}ref={c=>registerInput(c)}/>}</Autocomplete>

• valuestring - Input value (for a controlled component)
• defaultValuestring - Initial value (for a uncontrolled component)
• getInputElementfunction - Optional callback that provides<input> DOM element
• registerInputfunction - Registers<input> DOM element
• optionsarray - Array of options that are used to predict a value

options is an array of strings or objects with atext orvalue string properties.

Dropdown shows a dropdown with a (optionally filtered) list of suitable options.

<DropdowndefaultValue={value}options={options}>{(inputProps,{ textValue})=><inputtype='text'{...inputProps}/>}</Dropdown>

• valuestring - Input value (for a controlled component)
• defaultValuestring - Initial value (for a uncontrolled component)
• optionsarray - Array of shown options
• onRenderOptionfunction(className, style, option) - Renders option in list
• onRenderCaretfunction(className, style, isActive, children) - Renders a caret
• onRenderListfunction(className, style, isActive, listShown, children, header) - Renders list of options
• onRenderListHeaderfunction(allCount, shownCount, staticCount) - Renders list header
• dropdownPropsobject - Custom props passed to dropdown root element
• optionFiltersarray - List of option filters
• getInputElementfunction - Optional callback that provides<input> DOM element
• registerInputfunction - Registers<input> DOM element

options is an array of strings or objects with a shape:

• value - "real" value of on option
• text - text used as input value when option is selected
• label - text or component rendered in list
• static - option is never filtered out or sorted
• disabled - option is not selectable

null option is rendered as a separator

optionFilters is an array of filters for options (for convenience). By default, these filters are used:

• filters.filterByMatchingTextWithThreshold(20) - filters options by matching value, if options length is more than 20
• filters.sortByMatchingText - sorting by matching value
• filters.limitBy(100) - cuts options longer than 100
• filters.notFoundMessage('No matches found') - shows option with 'No matches found' label if all options are filtered out
• filters.filterRedudantSeparators - removes redudant separators (duplicated or at the begin/end of the list)

Mask formats input value.

<MaskdefaultValue={value}pattern='0000-0000-0000-0000'>{(inputProps,{ value})=><inputtype='text'{...inputProps}/>}</Mask>

• valuestring - Input value (for a controlled component)
• defaultValuestring - Initial value (for a uncontrolled component)
• getInputElementfunction - Optional callback that provides<input> DOM element
• registerInputfunction - Registers<input> DOM element
• patternstring - String formatting pattern. Only '0' (digit) or 'a' (letter) pattern chars are currently supported.
• emptyCharstring - Character used as an empty symbol (' ' by default)
• placeholderstring - If set, it is shown whenunmaskedValue is empty
• onUnmaskedValueChangefunction(text) - Fires when value is changed, providing unmasked value
• onValuePreUpdatefunction - Optional callback to update value before it is parsed byMask

DatePicker usesMask to format date and shows calendar (react-date-picker by default) in popup.

<DatePickerdefaultValue={moment(value).format('ddd DD/MM/YYYY')}placeholder={moment().format('ddd DD/MM/YYYY')}pattern='ddd DD/MM/YYYY'locale='en'>{(inputProps,{ value})=><inputtype='text'{...inputProps}/>}</DatePicker>

• valuestring - Input value (for a controlled component)
• defaultValuestring - Initial value (for a uncontrolled component)
• patternstring - Date formatting pattern. For now, only these tokens are supported:
  • DD - day of month
  • MM - month
  • YYYY - year
  • ddd - day of week(not editable)
• placeholderstring - If set, it is shown whenunmaskedValue is empty
• localestring - Date locale
• todayButtonTextstring - Text for 'Go to Today' button label
• onRenderCalendarfunction({ styling, style, date, isActive, popupShown, onSelect, locale, todayButtonText }) - Returns calendar component shown in popup (react-day-picker-themeable by default)
• onChangefunction(date) - Fires when date is selected, providingmoment.js object
• getInputElementfunction - Optional callback that provides<input> DOM element
• registerInputfunction - Registers<input> DOM element
• onValuePreUpdatefunction - Optional callback to update value before it is parsed byDatePicker. In this example, it parses inserted timestamp:

onValuePreUpdate={v=>parseInt(v,10)>1e8 ?moment(parseInt(v,10)).format('ddd DD/MM/YYYY') :v}

Combobox combinesDropdown,Autosize and/orAutocomplete components.

<ComboboxdefaultValue={value}options={options}autosizeautocomplete>{(inputProps,{ matchingText, width})=><inputtype='text'{...inputProps}/>}</Combobox>

Autosize andAutocomlete are enabled with corresponding bool props, other properties are proxied toDropdown component.

Seedemo for code examples.

• react-autocomplete - Dropdown with autocompletion by Ryan Florence (that led me to create this library)
• react-maskedinput - More advanced masked input by Jonny Buchanan
• react-autosuggest - Beautifully crafted input with dropdown suggestions