JBButton React

this component is React.js wrapper for jb-button web component JBButton is a simple button react component with some additional feature.

• custom styling

• loading state

sample: https://codepen.io/javadbat/pen/NWdeMwY

installation

    npm i jb-button-react

in your jsx file

    import {JBButton} from "jb-button-rect"

    <JBButton></JBButton>

instruction

set loading

you can show loading by setting props , isLoading = true you can add text to loading by your button text

other props

| props name | description | | ------------- | ----------------------- | | type | change button HTML type | | disabled | disable the button | | isLoading | set loading state of button |

events

• onClick

  <JBButton onClick={(event) => console.log(event)}></JBButton>

change button style

the way of injecting style to jb-button is by providing css variable in component parent element to set some atttribute for example to set button height:

.your-jb-button-wrapper{
    /*degualt height of button is 44px but it will change it to 40px*/
    --jb-button-height: 40px;
    /* set button marging for example for zero margin:*/
    --jb-button-margin: 0 0;
}

in some cases in your project you need to change the defualt style of the component for example you need zero margin or different border-radius and etc. if you want to set a custom style to this component all you need is to set css variable in parent scope of the component.

|css variable name | description |
|------------------ | -------------------------------------- | |--jb-button-margin | component margin defualt is 16px 0 | |--jb-button-border-radius | component border-radius defualt is 16px | |--jb-button-border | component css border attribute default is none | |--jb-button-primary-bgcolor | background color of button in primary | |--jb-button-primary-hover-bgcolor | background color of button in primary | |--jb-button-height | button height defualt is 44px | |--jb-button-text-shadow | button text shadow defualt is none | |--jb-button-font-weight | font weight of button defualt is bold | |--jb-button-font-size | font size of button defualt is 1.2em | |--jb-button-color-hover | color of buttton in hover state | |--jb-button-cursor | change button cursor defualt is pointer | |--jb-button-bgcolor-disabled | background color of button when disabled | |--jb-button-color-disabled | color of button when disabled | |--jb-button-cursor-disabled | cursor of button when disabled | |--jb-button-border-disabled | border of button when disabled | |--jb-button-text-shadow-disabled | text shadow of button when disabled |