Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@zumper/react-ladda
Advanced tools
Readme
A React wrapper for Ladda buttons. Example
This project started as a fork of react-ladda.
Differences:
data-
prefix are allowedes
, cjs
and umd
builds@zumper/react-ladda
can be installed directly through npm:
# with NPM
$ npm install --save @zumper/react-ladda
# with yarn
$ yarn add @zumper/react-ladda
LaddaButton
is a React component that renders a Ladda button. You can change the button's loading state and progress using the loading
and progress
props.
import React, { Component } from 'react'
import LaddaButton, { XL, SLIDE_UP } from '@zumper/react-ladda'
class MyButton extends Component {
state = { loading: false, progress: 0 }
onClick = () => {
this.setState((state) => ({
loading: true,
progress: 0.5,
}))
}
render() {
const { loading, progress } = this.state
return (
<LaddaButton
loading={loading}
progress={progress}
onClick={this.onClick}
color="mint"
size={XL}
style={SLIDE_UP}
spinnerSize={30}
spinnerColor="#ddd"
spinnerLines={12}
>
Click Here!
</LaddaButton>
)
}
}
export default MyButton
Although this package doesn't include the styles for the Ladda buttons, there are many different ways to include them. You can read about how to manage CSS in the Ladda docs.
If you are using webpack (or create-react-app) to build your project you can easily import the required styles directly from the ladda
package.
// import the ladda theme directly from the ladda package.
import 'ladda/dist/ladda.min.css'
// optionally import the themeless styles to style the buttons yourself.
import 'ladda/dist/ladda-themeless.min.css'
If you are using scss (or create-react-app) on your project you can import the scss styles directly from the ladda package.
// import themeless styles directly from the ladda package
@import '~ladda/css/ladda';
// OR import the themed styles
@import '~ladda/css/ladda-themed';
All of the native Ladda button options are supported through props:
Prop | Type | Description |
---|---|---|
loading | boolean | Displays the button's loading indicator |
progress | number | Number from 0.0 to 1.0 |
color or data-color | string | Color applied to the button (A color) |
size or data-size | string | A button size |
style or data-style | string | A button style |
spinnerSize or data-spinner-size | number | Number representing the size of the spinner in pixels |
spinnerColor or data-spinner-color | string | Color applied to the spinner (eg. #eee ) |
spinnerLines or data-spinner-lines | number | Number of spokes in the spinner |
Ladda comes with a variety of different sizes and styles that you can use. Button sizes and styles can be directly imported from @zumper/react-ladda
:
import LaddaButton, { GREEN, XS, EXPAND_LEFT } from '@zumper/react-ladda'
GREEN
RED
BLUE
PURPLE
MINT
XS
S
L
XL
CONTRACT
CONTRACT_OVERLAY
EXPAND_LEFT
EXPAND_RIGHT
EXPAND_UP
EXPAND_DOWN
SLIDE_LEFT
SLIDE_RIGHT
SLIDE_UP
SLIDE_DOWN
ZOOM_IN
ZOOM_OUT
FAQs
React wrapper for Ladda buttons
The npm package @zumper/react-ladda receives a total of 287 weekly downloads. As such, @zumper/react-ladda popularity was classified as not popular.
We found that @zumper/react-ladda demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.