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.
cnk-floating-button
Advanced tools
Readme
An animated button component built with React.
npm install cnk-floating-button --save
import React from "react";
import { render } from "react-dom";
import CNKFloatingButton from "../../src";
const buttonConfigurations = {
button1: {
iconName: "home",
onClick: () => {
console.log("Button1: Clicked");
}
},
button2: {
iconName: "phone",
onClick: () => {
console.log("Button2: Clicked");
}
},
button3: {
iconName: "envelope",
onClick: () => {
console.log("Button3: Clicked");
}
},
button4: {
iconName: "star",
onClick: () => {
console.log("Button4: Clicked");
}
}
};
const App = () => (
<CNKFloatingButton
iconName="sidebar"
button1={buttonConfigurations.button1}
button2={buttonConfigurations.button2}
button3={buttonConfigurations.button3}
button4={buttonConfigurations.button4} />
);
render(<App />, document.getElementById("root"));
Prop | Value |
---|---|
text | [String]: Label of the main button |
iconName | [String]: Icon name of the main button. We use semantic ui library for icons. |
size | [Number]: Width and Height's value of main button. One value for all of them. |
fontSize | [Number]: Font Size of the Text or Icon. |
button1 | [Object]: Child button configuration for top-left |
button2 | [Object]: Child button configuration for top-right |
button3 | [Object]: Child button configuration for bottom-left |
button4 | [Object]: Child button configuration for bottom-right |
Note: At least one button configuration must be valid |
Prop | Value |
---|---|
text | [String]: Label of the button |
iconName | [String]: Icon name of the button. We use semantic ui library for icons. |
fontSize | [Number]: Font Size of the Text or Icon. |
onClick | [Function][Required]: OnClick event for the button. |
backgroundColor | [String]: Background Color of the Button. This must be valid css color. |
foregroundColor | [String]: Foreground Color of the Button for Text or Icon. This must be valid css color. |
hoverBackgroundColor | [String]: Hover effect background color of the button. This must be valid css color. |
FAQs
An animated button component for React.
The npm package cnk-floating-button receives a total of 1 weekly downloads. As such, cnk-floating-button popularity was classified as not popular.
We found that cnk-floating-button demonstrated a not healthy version release cadence and project activity because the last version was released 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
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.