Button component for React [NPM Package]

  • node module
  • nodejs
  • react
  • react component

Table Of Contents

    Technologies used: React, Bootstrap

    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)} />
        )
    }
    PropValues
    buttonCategorydefault, primary, success, danger, info
    buttonSizelarge
    buttonTextString
    buttonSymbol* Font Awesome class
    handleButtonClickhandleClick function
    handleButtonHoverOverhandleHoverOver function
    handleButtonHoverExithandleHoverExit 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 *