Select component for React [NPM Package]

  • node module
  • nodejs
  • react
  • react component

Select component for React using some CSS styles from Bootstrap as well as custom CSS styles.

https://www.npmjs.com/package/library-select-component

Install and save component as a dependency


npm install --save library-select-component

Import component into your app


import Select from 'library-select-component'

Create an array of objects with the keys being name and id


const selectData = [
  {
    name: 'Item one',
    id: 'one'
  },
  {
    name: 'Item two',
    id: 'two'
  },
  {
    name: 'Item three',
    id: 'three'
  }
]

Create and assign active select state with empty value


constructor(props) {
  super(props)

  this.state = {
    activeSelect: ''
  }
}

Create the function that will handle the active select state


activeSelect (event) {
  this.setState({ activeSelect: event.target.innerText })
}

Create the function that will show the select options


showSelectOptions (event) {
  event.target.offsetParent.lastChild.classList.toggle("show");
}

Create the function that will hide the select options


hideSelectOptions (event) {
  event.preventDefault();
  event.target.offsetParent.classList.toggle("show");
}

Create the function that will generate the select options


selectOptions () {
  const selectData = [
    {
      name: 'Item one',
      id: 'one'
    },
    {
      name: 'Item two',
      id: 'two'
    },
    {
      name: 'Item three',
      id: 'three'
    }
  ]

  return selectData.map((data) => {
    return (
      <a
        className="dropdown-item"
        key={data.id}
        onMouseUp={this.hideSelectOptions.bind(this)}
        onClick={this.activeSelect.bind(this)} >
          {data.name}
      </a>
    )
  })
}

Render the component with the functions we created, object array as well as any other props that are needed

render() {
  return (
    <Fragment>
      <Select
        selectOptions={this.selectOptions()}
        selectTheme="dark"
        showSelectOptions={this.showSelectOptions.bind(this)}
        placeHolder="Please select..."
        selectedText={!this.state.activeSelect ? null : this.state.activeSelect} />
    </Fragment>
  )
}
Prop Values
selectOptions selectOptions function
selectTheme dark or light
showOptions showOptions function
hideOptions hideOptions function
placeHolder String
selectedText String

Bronson Dunbar

I'm a WordPress fanatic, a fan of React & AWS and a Sass magician! I also enjoy capturing moments through the lens of my Canon https://adobe.ly/2HkE1SZ

Leave a Reply

Your email address will not be published. Required fields are marked *