Button component for React [NPM Package]

  • node module
  • nodejs
  • react
  • react component

Table Of Contents

    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) {
        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 *