Button component for React [NPM Package]

Reading Time: 1

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