npm

Need private packages and team management tools?Check out npm Orgs. »

library-button-component

1.0.14 • Public • Published

Button Component

Button component for React

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 handleButtonClick function
handleButtonHoverOver handleButtonHoverOver function
handleButtonHoverExit handleButtonHoverExit function
  • Font Awesome needs to included in project for symbols to display

Keywords

none

install

npm i library-button-component

Downloadsweekly downloads

2

version

1.0.14

license

MIT

last publish

collaborators

  • avatar
Report a vulnerability