1.0.3 • Published 6 years ago

react-input-select v1.0.3

Weekly downloads
10
License
MIT
Repository
github
Last release
6 years ago

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 NameTypeDescription
containerClassStringA custom classname for the component's parent div.
containerIdStringA custom id for the component's parent div
dataArray of Strings/Objectsthe array of data to be used as dropdown options.
dataFilterFunctionA custom filtering function. Should take in two(2) parameters: the data supplied to the component, and the filter string
dataKeyStringThe key for the text to display in the dropdown. Applicable only if isObject is true.
displayAllBooleanBoolean variable used to determine whether the dropdown should be displayed regardless of the filtering string value or not.
dropdownClassStringA custom classname for the dropdown div.
dropdownOptionClassStringA custom classname for the dropdown options.
inputClassStringA custom classname for the input field.
inputIdStringA custom id for the input field.
isObjectBooleanBoolean variable to determine where the supplied data is an array of objects or strings.
onChangeFunctionThe onChange event function for the input field. Should take take in one(1) parameter: the event.
onBlurFunctionThe onBlur event function for the input field. Should take take in one(1) parameter: the event.
onOptionClickFunctionThe onCLick event function for dropdown options. Should take in three(3) parameters: the clicked item, the supplied data, and the click event.
styleObjectInline styling for the component. Limit only to the following keys: container, dropdown, input, options.
valueStringValue for the input field.