3D animated react button component with progress bar.

Overview

Reactive Button

Reactive Button

3D animated react button component with progress bar.

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

Author arifszn


Reactive Button Preview

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 !

Table of Contents

Resources

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

Props Type Description Default
buttonState string Current button state 'idle'
onClick function Callback function when clicking button () => {}
color string Button color 'primary'
idleText string | ReactNode Button text when idle 'Click Me'
loadingText string | ReactNode Button text when loading 'Loading'
successText string | ReactNode Button text when loading successful 'Success'
errorText string | ReactNode Button text when loading failed 'Error'
type string Button type attribute 'button'
className string Button classnames ''
style React.CSSProperties Custom style {}
outline boolean Enable outline effect false
shadow boolean Enable shadow effect false
rounded boolean Enable rounded button false
size string Button size 'normal'
block boolean Block Button false
messageDuration number Success/Error message duration in millisecond 2000
disabled boolean Disable button false
buttonRef React.Ref | null Button reference null
width string | null Override button width null
height string | null Override button height null
animation boolean Button hover and click animation true

Contribute

To contribute, clone this repo locally and commit your code on a new branch. Feel free to create an issue or make a pull request.

Thank You

Stargazers repo roster for @arifszn/reactive-button Forkers repo roster for @arifszn/reactive-button

Support

Show your ❤️ and support by giving a on Github.

License

MIT Licensed.

Copyright © MD. Ariful Alam 2021.

Releases(v1.3.7)
  • v1.3.7(Aug 20, 2021)

  • v1.3.6(Mar 24, 2021)

  • v1.3.4(Mar 23, 2021)

  • v1.3.3(Oct 12, 2020)

  • v1.3.2(Oct 7, 2020)

  • v1.3.1(Oct 6, 2020)

  • v1.3.0(Oct 6, 2020)

  • v1.2.0(Oct 6, 2020)

  • v1.1.22(Sep 18, 2020)

    Changelog

    [1.1.22] - 2020-09-29

    Fixed

    • Type definition typo

    [1.1.21] - 2020-09-29

    Changed

    • Readme File

    [1.1.20] - 2020-09-28

    Changed

    • Readme File

    [1.1.19] - 2020-09-26

    Changed

    • Css variable '--reactive-button-height to' '--reactive-button-min-height'

    [1.1.18] - 2020-09-24

    Fixed

    • Line height css

    [1.1.15] - 2020-09-22

    Fixed

    • Line height issue

    [1.1.14] - 2020-09-22

    Changed

    • Readme file

    [1.1.13] - 2020-09-22

    Changed

    • Build files

    [1.1.12] - 2020-09-22

    Fixed

    • Loading progress position issue

    [1.1.11] - 2020-09-22

    Fixed

    • text-align css property issue

    [1.1.10] - 2020-09-22

    Added

    • Added success and error icons

    Changed

    • Default values
    • Default loading icon

    Fixed

    • Size style

    [1.1.9] - 2020-09-21

    Changed

    • Revert min-height to height

    [1.1.8] - 2020-09-21

    Fixed

    • css variable name

    [1.1.7] - 2020-09-21

    Changed

    • Default height changed to min-height

    [1.1.6] - 2020-09-21

    Added

    • Dynamic border radius

    [1.1.5] - 2020-09-21

    Changed

    • Usage section in readme

    [1.1.4] - 2020-09-20

    Changed

    • Build only

    [1.1.3] - 2020-09-20

    Added

    • New props 'animation' to control hover and click animation

    [1.1.2] - 2020-09-20

    Fixed

    • Some minor styles

    [1.1.1] - 2020-09-18

    Added

    • New props 'width' to Override button width
    • New props 'height' to Override button height

    [1.1.0] - 2020-09-18

    Added

    • Block button
    • Better type definitions.

    Changed

    • 'idleLabel' to 'idleText'
    • 'loadingLabel' to 'loadingText'
    • 'successLabel' to 'successText'
    • 'errorLabel' to 'errorText'

    Removed

    • 'autoHideMessage' because it causing bugs
    Source code(tar.gz)
    Source code(zip)
  • v1.0.14(Sep 17, 2020)

Owner
MD. Ariful Alam
Coder | Dreamer | Maker
MD. Ariful Alam
3D animated react button component with progress bar.

3D animated react button component with progress bar.

MD. Ariful Alam 68 Oct 5, 2021
Progress component for React and React Native

react-progress-label Progress component for React and React Native Installation yarn add react-progress-label npm install react-progress-label --save

SWIFT CARROT Technologies 95 May 16, 2021
❄️ The ultimate Line Progress Bar UI for React - Supports 🌸 Natural color gradients & ☃️ Coherent border rounding

Frogress ❄️ The ultimate Line Progress Bar UI for React @frogress/line ?? Installation # Install peer depedencies yarn add react react-dom styled-comp

Junho Yeo 12 Sep 6, 2021
Creates a download handler function and gives progress information

Creates a download handler function and gives progress information

Olavo Parno 57 Sep 15, 2021
⚪ SVG-Powered component to easily create skeleton loadings.

SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading). Features ⚙️ Customizable: Feel free to change the colors,

Danilo Woznica 11.6k Oct 13, 2021
Make beautiful, animated loading skeletons that automatically adapt to your app.

react-loading-skeleton Make beautiful, animated loading skeletons that automatically adapt to your app. Basic usage Install by npm/yarn with react-loa

David Tang 2.4k Oct 13, 2021
A collection of loading indicators animated with CSS for React

react-spinkit A collection of loading indicators animated with CSS for React Currently I've ported all the spinner animations from Spinkit. If you hav

Kyle Mathews 1.4k Oct 2, 2021
Amazing collection of React spinners components with pure css

React Spinners CSS Loaders (Vue, Angular) Amazing collection of React spinners components with pure css. The React spinners are based on loading.io an

Josh Kuttler 274 Sep 24, 2021
A collection of loading spinner components for react

React Spinners A collection of loading spinners with React.js based on Halogen. This package is bootstraped using react-npm-boilerplate Demo Demo Page

David Hu 2k Oct 12, 2021
react-loader - React component that displays a spinner via spin.js until your component is loaded.

react-loader react-loader provides your React.js component a simple mechanism for rendering a loading spinner (via spin.js) while data is loading, suc

Cognizant Studio 529 Sep 16, 2021
Easy way to block the user from interacting with your UI.

react-block-ui Easy way to block the user from interacting with your UI. About This library contains easy to use components to prevent the user from i

Availity 271 Sep 13, 2021