![Malicious npm Package Typosquats react-login-page to Deploy Keylogger](https://cdn.sanity.io/images/cgdhsj6q/production/007b21d9cf9e03ae0bb3f577d1bd59b9d715645a-1024x1024.webp?w=400&fit=max&auto=format)
Research
Security News
Malicious npm Package Typosquats react-login-page to Deploy Keylogger
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
@synerise/ds-button
Advanced tools
Readme
import { version } from './package.json';
`Current version: ${version}`;
Buttons allow users to take actions, and make choices, with a single tap. Buttons communicate actions that users can take. They are typically placed throughout your UI, in places such as dialogs, modal windows, forms, cards, and toolbars.
Inspired by Ant Design Button
This is a simple component, which means that it doesn't consist of other components.
npm i @synerise/ds-button
or
yarn add @synerise/ds-button
import Icon from '@synerise/ds-icon';
import { AngleDownS } from '@synerise/ds-icon';
<div>
<Button mode="split" type="custom-color" color="green">
Click
<Icon component={<AngleDownS />} />
</Button>
</div>
Property | Description | Type | Default |
---|---|---|---|
color | Defines color of custom-color button. | green / grey / yellow / blue / pink / mars / orange / fern / cyan / purple / violet | red |
disabled | Defines if the button is disabled. | boolean | false |
groupVariant | Defines shape of the button | left-rounded / squared / right-rounded | - |
justifyContent | Defines justify of content in button. | JustifyContentProperty (React.CSSPRroperties) | - |
loading | Sets the loading status of button. | boolean / { delay?: number } | false |
mode | Defines the mode of the button content. It affects content inside the button | single-icon / split / two-icons /label-icon / icon-label | - |
onClick | Callback executed after clicking the button | (event: React.MouseEvent) => void | - |
type | Defines the type of the button. | primary / secondary / tertiary / tertiary-white / ghost-primary / ghost / ghost-white / custom-color / custom-color-ghost | secondary |
iconColor | Defines color of icon in button. | green / grey / yellow / blue / pink / mars / orange / fern / cyan / purple / violet | grey |
error | Defines if the button has error button styles . | boolean | false |
activated | Defines if the button has activated button styles . | boolean | false |
Property | Description | Type | Default |
---|---|---|---|
block | Defines if the button should take all available space. | boolean | false |
disabled | Defines if the button is disabled. | boolean | false |
label | Label of the button. | string / React.ReactNode | - |
onClick | Callback executed after clicking the button | (event: React.MouseEvent) => void | - |
status | Defines the color of the button. | upload / error / default | default |
Property | Description | Type | Default |
---|---|---|---|
disabled | Defines if the button is disabled. | boolean | false |
expanded | The current state of the button. | boolean | false |
onClick | Callback executed after clicking the button | (event: React.MouseEvent) => void | - |
size | Defines the size of the button. | S / M | M |
This is special checkbox built on Button and inheriting its appereance.
It behaves like checkbox input due to role="checkbox"
and aria-checked
attributes.
It inherits all Button
's props excluding type
, block
, color
, groupVariant
, icon
, iconColor
, leftIconSize
, mode
, rightIconSize
, size
, onChange
.
Property | Description | Type | Default |
---|---|---|---|
checked | (optional) Sets checkbox state for controlled component. | boolean | undefined |
defaultChecked | (optional) Sets checkbox state for uncontrolled component. | boolean | false |
hasError | (optional) Changes appereance for wrong validation. | boolean | undefined |
indeterminate | (optional) Forces indeterminate checkbox state. | boolean | undefined |
onChange | (optional) On change callback | (checked: boolean) => void |
This is star toggle built on Button and inheriting its appereance.
It inherits all Button
's props excluding.
Property | Description | Type | Default |
---|---|---|---|
active | (optional) Sets checkbox state for controlled component. | boolean | undefined |
FAQs
Unknown package
The npm package @synerise/ds-button receives a total of 791 weekly downloads. As such, @synerise/ds-button popularity was classified as not popular.
We found that @synerise/ds-button demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 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.
Research
Security News
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.