React-easy-button NPM

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

import React from 'react'
import {EasyButton} from 'react-easy-button';

const Button: React.FC = () => {
    return (
	<EasyButton label="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.

<EasyButton label="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

<EasyButton label="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