Button component for React [NPM Package]

  • node module
  • nodejs
  • react
  • react component
npm install --save library-button-component

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

Prop Default Values
buttonCategory default default, primary, success, danger, info
buttonSize none large
buttonText Button String for button text
buttonSymbol none * Font Awesome class
handleClick none handleClick function
handleHoverOver none handleHoverOver function
handleHoverExit none handleHoverExit function

* Font Awesome needs to included in project for symbols to display

constructor(props) {
 super(props)

this.state = {
 buttonAction: '',
 buttonCode: '',
 buttonText: ''
 }
}

handleClick(event) {
 this.setState ({
 buttonAction: 'Click'
 });
}

handleHoverOver(event) {
 this.setState ({
 buttonAction: 'Hover',
 buttonCode: event.target.innerHTML,
 buttonText: event.target.textContent
 });

event.target.innerHTML = "Hovering..."
}

handleHoverExit(event) {
 event.target.innerHTML = this.state.buttonCode;
}

render () {
 return (
 <ButtonComponent
 buttonCategory="default"
 buttonSize="default"
 buttonText="Default"
 handleClick={this.handleClick.bind(this)}
 handleHoverOver={this.handleHoverOver.bind(this)}
 handleHoverExit={this.handleHoverExit.bind(this)} />
 )
}

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 *