Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
jb-button-react
Advanced tools
Readme
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
npm i jb-button-react
in your jsx file
import {JBButton} from "jb-button-rect"
<JBButton></JBButton>
you can show loading by setting props , isLoading = true you can add text to loading by your button text
props name | description |
---|---|
type | change button HTML type |
disabled | disable the button |
isLoading | set loading state of button |
<JBButton onClick={(event) => console.log(event)}></JBButton>
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 |
FAQs
button react component
We found that jb-button-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).