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.

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

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) {
    super(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 (
        <ButtonComponent
          buttonCategory="default"
          buttonSize="default"
          buttonText="Default"
          handleButtonClick={this.handleButtonClick.bind(this)}
          handleButtonHoverOver={this.handleButtonHoverOver.bind(this)}
          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 *