Button component for React [NPM Package]

  • node module
  • nodejs
  • react
  • react component

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


Install and save component as a dependency

npm install --save library-button-component

Import component into your app

import Button from 'library-button-component'

Create and assign button states with empty values

constructor(props) {

    this.state = {
        buttonAction: '',
        buttonCode: '',
        buttonText: ''

Create the function that will handle mouse click events

handleButtonClick(event) {
    this.setState ({
        buttonAction: 'Click'

Create the function that will handle mouse hover enter and exit events

handleButtonHoverOver(event) {
    this.setState ({
        buttonAction: 'Hover',
        buttonCode: event.target.innerHTML,
        buttonText: event.target.textContent

    event.target.innerHTML = "Hovering..."

handleButtonHoverExit(event) {
    event.target.innerHTML = this.state.buttonCode;

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

render () {
    return (
          handleButtonHoverExit={this.handleButtonHoverExit.bind(this)} />

Prop Values
buttonCategory default, primary, success, danger, info
buttonSize large
buttonText String
buttonSymbol * Font Awesome class
handleButtonClick handleClick function
handleButtonHoverOver handleHoverOver function
handleButtonHoverExit handleHoverExit function

* Font Awesome needs to included in project for symbols to display

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 *