# jb-button-react

> button react component

Latest version **2.2.2** (published 2024-12-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install jb-button-react
pnpm add jb-button-react
yarn add jb-button-react
bun add jb-button-react
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.2 |
| Published | 2024-12-25 |
| First published | 2021-12-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 29.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | mohammad javad bathaei |
| Maintainers | javadbat |
| Keywords | jb, jb-button, button, web component, react button |

## Links

- npm: https://www.npmjs.com/package/jb-button-react
- Repository: https://github.com/javadbat/jb-button-react
- Homepage: https://github.com/javadbat/jb-button-react#readme
- Issues: https://github.com/javadbat/jb-button-react/issues
- npm.io page: https://npm.io/package/jb-button-react

## Dependencies (1)

- [jb-button](https://npm.io/package/jb-button.md) >=2.2.0

## Recent versions

- 2.2.2 (latest) — 2024-12-25
- 2.2.1 — 2024-10-29
- 2.2.0 — 2024-10-29
- 2.0.0 — 2023-06-23
- 1.0.2 — 2022-02-25
- 1.0.1 — 2021-12-28
- 1.0.0 — 2021-12-28

## README

# JBButton React

> [!WARNING]  
> this package is deprecated and moved to [jb-button/react](https://github.com/javadbat/jb-button/tree/main/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: <https://codepen.io/javadbat/pen/NWdeMwY>
## installation

```command
    npm i jb-button-react
```
in your jsx file
```js
    import {JBButton} from "jb-button-rect"
```
``` jsx
    <JBButton></JBButton>
```
## instruction
#### set loading

you can show loading by setting props , isLoading = true you can add text to loading by <JBButton loading-text="در حال ثبت">your button text</JBButton>

#### other props

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

### events
- onClick
```jsx
  <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:

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

---
_Source: https://npm.io/package/jb-button-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._