Select component for React [NPM Package]

Reading Time: 1

  • node module
  • nodejs
  • react
  • react component

Table Of Contents

    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 *