Reactive Button: 3D animated react button component with progress bar
Tags: opensource, github, react, npm
Published: 2021-03-25 13:48:15

I was looking for an animated button library with progress bar for react. I didn't want to add any UI framework for that. The closest thing I found was [react-awesome-button](https://github.com/rcaferati/react-awesome-button). It is pretty good but didn't have many options like adding icons in loading text, rounded shape, outlined shape or shadow effect. Then I decided that I will make a library myself.

[𝐑𝐞𝐚𝐜𝐭𝐢𝐯𝐞 𝐁𝐮𝐭𝐭𝐨𝐧](https://github.com/arifszn/reactive-button) is a 3D animated react button component with progress bar. It is very lightweight and has zero dependency. You can add any icons in it and the fun part is, if you don't want to add any third party icon library in your project then it has default loading, success and error icons. It also serves the purpose of notification. So you might not need to install a bunch of libraries for that.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttmksc5ujm9otu13l2b5.gif)

I will be glad if you give it a try in your project. Also, please leave a ⭐️. Stars encourage us to contribute more and It costs you nothing.


Repo: [https://github.com/arifszn/reactive-button](https://github.com/arifszn/reactive-button)

Playground: [https://arifszn.github.io/reactive-button/docs/playground](https://arifszn.github.io/reactive-button/docs/playground)


&nbsp;


The goal of the library is to show progress. Below example demonstrates an asynchronous task. When clicking the button, an asynchronous task (e.g. Data fetch, form submit) will be processed and after processing, a success or error message will be displayed.

- Initialize a state with string value <code>'idle'</code> and assign it as <strong>'buttonState'</strong> prop. Now it will render an idle text.
- When the button is clicked, set state's value to <code>'loading'</code>. 
- When the task is completed, set state to <code>'success'</code>, <code>'error'</code> or <code>'idle'</code> according to your need.

## Basic Usage

```jsx 
import React, { useState } from 'react';
import ReactiveButton from 'reactive-button';

function App() {
   const [state, setState] = useState('idle');

   const onClickHandler = () => {
      setState('loading');
      setTimeout(() => {
         setState('success');
      }, 2000);
   }

   return (
      <ReactiveButton
         buttonState={state}
         onClick={onClickHandler}
      />
   );
}

export default App;
```

## Full Usage

```jsx 
import React, { useState } from 'react';
import ReactiveButton from 'reactive-button';

function App() {
   const [state, setState] = useState('idle');

   const onClickHandler = () => {
      setState('loading');
      setTimeout(() => {
         setState('success');
      }, 2000);
   }

   return (
      <ReactiveButton
         buttonState={state}
         onClick={onClickHandler}
         color={'primary'}
         idleText={'Button'}
         loadingText={'Loading'}
         successText={'Success'}
         errorText={'Error'}
         type={'button'}
         className={'class1 class2'}
         style={{ borderRadius: '5px' }}
         outline={false}
         shadow={false}
         rounded={false}
         size={'normal'}
         block={false}
         messageDuration={2000}
         disabled={false}
         buttonRef={null}
         width={null}
         height={null}
         animation={true}
    />
  );
}

export default App;
```


For non asynchronous task, state management is not needed. Use as like normal button.



## Other Usage

Reactive Button has all the functionalities of a normal button.

### Color

Reactive Button comes with 10 default color options.

``` jsx
<ReactiveButton color="primary"/>
<ReactiveButton color="secondary"/>
<ReactiveButton color="teal"/>
<ReactiveButton color="green"/>
<ReactiveButton color="red"/>
<ReactiveButton color="violet"/>
<ReactiveButton color="blue"/>
<ReactiveButton color="yellow"/>
<ReactiveButton color="dark"/>
<ReactiveButton color="light"/>
```

### Size

There are 4 sizes available.


``` jsx
<ReactiveButton size="tiny"/>
<ReactiveButton size="small"/>
<ReactiveButton size="medium"/>
<ReactiveButton size="large"/>
```

### Style

Make the buttons more beautiful with these customization options.

``` jsx
<ReactiveButton outline/>
<ReactiveButton rounded/>
<ReactiveButton shadow/>
```

### Existing State

In your project, There might be existing state for loading indicator which accepts boolean value only. If you don't want to define new state for Reactive Button, then utilize the existing state.

``` jsx
const [loading, setLoading] = useState(false);

return (
   <ReactiveButton
      buttonState={loading ? 'loading' : 'idle'}
      idleText={'Button'}
      loadingText={'Loading'}
   />
);
```

### Without State

You are not limited to use state always.

``` jsx
<ReactiveButton
   onClick={doSomething}
   idleText={"Some Text"}
/>
```

### Using Icons

You can use your own icons. Don't forget to wrap them with a parent element.

``` jsx
<ReactiveButton
   idleText={<span><FontAwesomeIcon icon={faReply}/> Send</span>}
/>
```

### Form Submit

If you need to submit form by button clicking, set the <code>type</code> prop as '<strong>submit</strong>'. 

``` jsx
<form>
   <input type="text" name="username"/>
   <input type="password" name="password"/>
   <ReactiveButton
      type={'submit'}
      idleText="Submit"
   />
</form>
```

### Anchor Tag

To use Reactive button as anchor tag, simply wrap it with an anchor tag.

``` jsx
<a href="https://github.com/" target="_blank">
   <ReactiveButton idleText="Visit Github" />
</a>
```

&nbsp;

**My other works:**

[Reddit Image Fetcher](https://github.com/arifszn/reddit-image-fetcher): A JavaScript package for fetching reddit images, memes, wallpapers and more.