react-easy-button

Implement easily customize out of the box. Work with a vast number of pre-maid react button themes

Installation

# NPM
npm i react-easy-button
# Yarn
yarn add react-easy-button
# Pnpm 
pnpm add react-easy-button

Simple example

importReactfrom'react'import{EasyButton}from'react-easy-button';constButton: React.FC=()=>{return(<EasyButtonlabel="Press me"/>)}

Custom style

Style

Note: If theme is not equal to custom it will not work

If the style is provided through style prop it will reset previous styles & apply provided style. In this example below button will only have color & background color style. The rest of the styles will be reset. To avoid this use extendStyle prop.

<EasyButtonlabel="Press me"style={{color: "#242424",backgroundColor: "#fcfcfc"}}/>

Extend styles

It will keep all previous styles & only change provided styles. It will work for all themes

<EasyButtonlabel="Press me"extendStyle={{color: "#242424",backgroundColor: "#fcfcfc"}}/>

EasyButton props

Attributes	Type	Default value	Description
label	string	undefined	Required. If not provided, will throw error.
title	string	undefined	Optional. Title attribute of html button tag.
theme	string	primary	Optional. Available themes (custom, error, success, warn, purple, pink, primary)
debounceTimeout	number	0	Optional. Delaytime in ms (eg. 100 = 100ms))
disabled	boolean	false	Optional.
style	object	undefined	Optional. If provided & theme === "custom" then only provided style will be applyed
extendStyle	object	undefined	Optional. If provided, will change only provided styles. eg. theme="purple" & extendStyle={{border: "2px solid purple"}} it will keep theme styles with provided style border: "2px solid purple"""
hoverStyle	object	undefined	Optional. If mouse entered then provided style will applied
extendHoverStyle	object	undefined	Optional. Provided styles will be applied if mouse entered.
easyRef	object	undefined	Optional. Will return referance of the button
onClick	function	undefined	Optional. Will run the function if button is clicked
onHover	function	undefined	Optional. Will run the function if mouse cursor hovered on the button
onFocus	function	undefined	Optional. Will run the function if button is focused

License

MIT