Button Group component for React [NPM Package]

  • node module
  • nodejs
  • react
  • react component

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

https://www.npmjs.com/package/library-button-group-component

Install and save component as a dependency


npm install --save library-button-group-component

Import component into your app


import ButtonGroup from 'library-button-group-component'

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


const buttonGroupData = [
  {
    name: "Item 1",
    route: "/",
    items: [
      {
        name: "Sub item 1",
        route: "/"
      }
    ]
  },
  {
    name: "Item 2",
    route: "/blah"
  },
  {
    name: "Item 3",
    route: "/",
    items: [
      {
        name: "Sub item 3",
        route: "/"
      }
    ]
  },
]

Create the function that will show the options


showButtonGroupOptions (event) {
  var elems = document.querySelectorAll(".dropdown-menu");

  [].forEach.call(elems, function(el) {
      el.classList.remove("show")
  })

  let hasOptions = event.target.nextSibling.childNodes.length

  if (hasOptions > 0) {
    event.target.nextSibling.classList.add("show")
  }
}


Create the function that will hide the options


hideButtonGroupOptions (event) {
  let findElement = event.target.className

  if (findElement == 'dropdown-menu show') {
    event.target.classList.remove("show")
  } else if (findElement == 'dropdown-item') {
    event.target.parentElement.classList.remove("show")
  }
}

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


render () {
  const buttonGroupData = [
    {
      name: "Item 1",
      route: "/",
      items: [
        {
          name: "Sub item 1",
          route: "/"
        }
      ]
    },
    {
      name: "Item 2",
      route: "/blah"
    },
    {
      name: "Item 3",
      route: "/",
      items: [
        {
          name: "Sub item 3",
          route: "/"
        }
      ]
    },
  ]

  return (
    <div className="btn-group" role="group">
      <ButtonGroupComponent
        buttonGroupData={buttonGroupData}
        buttonGroupTheme="dark"
        showButtonGroupOptions={this.showButtonGroupOptions.bind(this)} 
        hideButtonGroupOptions={this.hideButtonGroupOptions.bind(this)} />
    </div>
  )
}
Prop Values
buttonGroupData Object
buttonGroupTheme dark or light
showButtonGroupOptions showButtonGroupOptions function
hideButtonGroupOptions hideButtonGroupOptions function

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 *