3D animated react button component with progress bar

Reactive Button

3D animated react button component with progress bar.

Reactive Button is a beautiful 3D animated react component to replace the traditional boring buttons. Comes with progress bar and the goal is to let the users visualize what is happening after a button click.

• 3D
• Animated
• Progress indicator
• Lightweight <20KB
• Supports icons
• Zero dependency
• Super easy to setup
• Super easy to customize
• And much more !

Installation

Install via NPM

npm install reactive-button

Install via Yarn

yarn add reactive-button

Usage

For complete usage, visit the docs.

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 'idle' and assign it as 'buttonState' prop. Now it will render an idle text.
• When the button is clicked, set state's value to 'loading'.
• When the task is completed, set state to 'success', 'error' or 'idle' according to your need.

Basic Usage:

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:

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.

Available Props

GitHub

https://github.com/arifszn/reactive-button