react-input-select

The React-input-select component is, to say the least, the love child of the select and input elements.

It's a simple attempt at making a select list but with more customizability and custom event handling.

And a work in progress.

Installation

The component is only available through npm, so just run:

npm install react-input-select

Usage

import it into you project with:

import ReactInputSelect from 'react-input-select'`

class ReactComponent extends React.Component {
  constructor() {
    super()
  }

  render() {
    return (
      <ReactInputSelect
        data = {[]}
        value = ''
      />
    )
  }
}

Props

Prop Name	Type	Description
containerClass	String	A custom classname for the component's parent div.
containerId	String	A custom id for the component's parent div
data	Array of Strings/Objects	the array of data to be used as dropdown options.
dataFilter	Function	A custom filtering function. Should take in two(2) parameters: the data supplied to the component, and the filter string
dataKey	String	The key for the text to display in the dropdown. Applicable only if isObject is true.
displayAll	Boolean	Boolean variable used to determine whether the dropdown should be displayed regardless of the filtering string value or not.
dropdownClass	String	A custom classname for the dropdown div.
dropdownOptionClass	String	A custom classname for the dropdown options.
inputClass	String	A custom classname for the input field.
inputId	String	A custom id for the input field.
isObject	Boolean	Boolean variable to determine where the supplied data is an array of objects or strings.
onChange	Function	The onChange event function for the input field. Should take take in one(1) parameter: the event.
onBlur	Function	The onBlur event function for the input field. Should take take in one(1) parameter: the event.
onOptionClick	Function	The onCLick event function for dropdown options. Should take in three(3) parameters: the clicked item, the supplied data, and the click event.
style	Object	Inline styling for the component. Limit only to the following keys: container, dropdown, input, options.
value	String	Value for the input field.