Popularity
1.8
Growing
Activity
5.4
-
68
4
9

Programming language: CSS
License: MIT License
Tags: UI Components     Buttons    
Latest version: v1.3.3

reactive-button alternatives and similar libraries

Based on the "Buttons" category.
Alternatively, view reactive-button alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of reactive-button or a related project?

Add another 'Buttons' Library

README

Reactive Button 3D animated react button component with progress bar. https://arifszn.github.io/reactive-button

Reactive Button is a beautiful 3D animated react component to replace the traditional boring buttons. Change your button style without adding any UI framework. 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
  • Supports icons
  • Zero dependency
  • Super easy to setup
  • Super easy to customize
  • And much more !

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 'buttonState''s value to 'loading'.
  • When the task is completed, set 'buttonState' 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;

Available Props

Props Type Description Default
buttonState string 'idle' \ 'loading' \
onClick function Callback function when clicking button () => {}
color string Button color 'primary'
idleText string \ ReactNode Button text when idle
loadingText string \ ReactNode Button text when loading
successText string \ ReactNode Button text when loading successful
errorText string \ ReactNode Button text when loading failed
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
width string \ null Override button width
height string \ null Override button height
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

Support

Show your ❤️ and support by giving a ⭐.

License

MIT Licensed. Copyright © MD. Ariful Alam 2021.


*Note that all licence references and agreements mentioned in the reactive-button README section above are relevant to that project's source code only.