https://github.com/z4o4z/react-dribble-button

The Button component with pretty nice hive and click effects
https://github.com/z4o4z/react-dribble-button

animation animations button component css3 js react

Last synced: 29 days ago
JSON representation

The Button component with pretty nice hive and click effects

• Host: GitHub
• URL: https://github.com/z4o4z/react-dribble-button
• Owner: z4o4z
• License: mit
• Created: 2017-10-22T21:02:07.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-06-26T10:18:57.000Z (over 2 years ago)
• Last Synced: 2024-04-17T08:12:50.368Z (9 months ago)
• Topics: animation, animations, button, component, css3, js, react
• Language: JavaScript
• Size: 35.7 MB
• Stars: 33
• Watchers: 2
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
[![](https://img.shields.io/npm/dm/react-dribble-button.svg?style=flat-square)](https://www.npmjs.com/package/react-dribble-button)

# react-dribble-button

The Button component with pretty nice hive and click effects

## Installation

```

$ npm install react-dribble-button

```

## Demo

[Try it out](https://z4o4z.github.io/react-dribble-button/storybook-static/index.html)

| ![](./demo/demo-1.gif) | ![](./demo/demo-4.gif) |

## Basic Usage

```js

import DribbleButton from 'react-dribble-button';

// Inside of a component's render() method:

render() {

  return (

    

      Try this cool color!

    

  );

}

```

## 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. :)