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

Readme

Keywords

none

Package Sidebar

Install

npm i library-button-component

Weekly Downloads

1

Version

1.0.14

License

MIT

Unpacked Size

372 kB

Total Files

7

Last publish

Collaborators

  • bronsond