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. 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.
𝐑𝐞𝐚𝐜𝐭𝐢𝐯𝐞 𝐁𝐮𝐭𝐭𝐨𝐧 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.
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
Playground: https://arifszn.github.io/reactive-button/docs/playground
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
'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.
Other Usage
Reactive Button has all the functionalities of a normal button.
Color
Reactive Button comes with 10 default color options.
<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.
<ReactiveButton size="tiny"/>
<ReactiveButton size="small"/>
<ReactiveButton size="medium"/>
<ReactiveButton size="large"/>
Style
Make the buttons more beautiful with these customization options.
<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.
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.
<ReactiveButton
onClick={doSomething}
idleText={"Some Text"}
/>
Using Icons
You can use your own icons. Don't forget to wrap them with a parent element.
<ReactiveButton
idleText={<span><FontAwesomeIcon icon={faReply}/> Send</span>}
/>
Form Submit
If you need to submit form by button clicking, set the type prop as 'submit'.
<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.
<a href="https://github.com/" target="_blank">
<ReactiveButton idleText="Visit Github" />
</a>
My other works:
Reddit Image Fetcher: A JavaScript package for fetching reddit images, memes, wallpapers and more.
Top comments (0)