react-input-select

1.0.3 • Public • Published

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.

Package Sidebar

Install

npm i react-input-select

Weekly Downloads

23

Version

1.0.3

License

MIT

Unpacked Size

799 kB

Total Files

8

Last publish

Collaborators

  • rayescmata