0.2.2 • Published 7 years ago
react-dribble-button v0.2.2
react-dribble-button
The Button component with pretty nice hive and click effects
Installation
$ npm install react-dribble-buttonDemo
| 
| 
|
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' | 'pink' | 'blue' | 'cyan' | 'teal' | 'lime' | 'grey' | 'green' | 'amber' | 'brown' | 'black' | 'orange' | 'purple' | 'yellow' | 'indigo' | 'default' | 'blue-grey' | 'light-blue' | 'light-green' | 'deep-orange' | 'deep-purple |
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. :)