react-dribble-button
The Button component with pretty nice hive and click effects
Installation
$ npm install react-dribble-button
Demo
Basic Usage
import DribbleButton from 'react-dribble-button'; // Inside of a component's render() method: render() { return ( <DribbleButton color="deep-orange" onClick={this.onClick} animationDuration={1000} > Try this cool color! </DribbleButton> ); }
Examples
Please clone the repo and run npm run storybook
or yarn storybook
to show examples of usages.
Usage (API)
The DribbleButton
component has a few properties, as described below.
Property | Type | Defaut | Description |
---|---|---|---|
color | string | default | The color theme. Should be one of the folowing strings: 'red' |
onClick | function | null | Click handler. |
children | any | null | Children element. |
className | string | '' | Class name of the component. |
component | string or Component | button | Component type. |
effectClassName | string | '' | Class name of the effect component. |
animationDuration | number | 650 | The dribble animation duration in ms. |
Contributing
I welcome contributions! Please open an issue if you have any feature ideas or find any bugs. I also accept pull requests with open arms. I will go over the issues when I have time. :)