https://github.com/javadbat/jb-button-react

https://github.com/javadbat/jb-button-react

Last synced: 7 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/javadbat/jb-button-react
• Owner: javadbat
• License: mit
• Created: 2021-12-28T09:42:08.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-10-13T21:38:27.000Z (2 months ago)
• Last Synced: 2024-10-29T21:18:58.308Z (about 2 months ago)
• Language: TypeScript
• Size: 6.84 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# JBButton React

this component is React.js wrapper for [jb-button](https://www.npmjs.com/package/jb-button) web component

JBButton is a simple button `react component` with some additional feature.

- custom styling

- loading state

sample: 

## installation

```command

    npm i jb-button-react

```

in your jsx file

```js

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

```

``` jsx

    

```

## 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

```jsx

   console.log(event)}>

```

## 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:

```css

.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            |