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.
cardon
Advanced tools
Readme
Cardon is a tool that allows you to create reusable cards that can be used as asynchronous functions on any screen.
You can check out a live demo of Cardon on CodeSandbox.
To use Cardon in your project, install it as a dependency using either Yarn or NPM.
# Yarn
$ yarn add cardon
# NPM
$ npm install cardon
Cardon provides two primary methods, 'CardonContainer'
and 'withCardon'
, for usage.
Component Name | Description |
---|---|
CardonContainer | It creates an instance for the cards. All cards are displayed within this container. |
withCardon | This method wraps the component you want to display as a card, injects properties named 'visible' and 'get' into it, and then returns an interface for usage. |
withCardon
Injected propswithCardon
adds several props to the component it wraps.
Name | Type | Description |
---|---|---|
visible | boolean | This property controls the visibility of the card. It toggles based on the invocation of the 'show' or 'hide' function. |
get | WithCardonGet | This is a callback generator function. Callbacks must be created using the 'get' function to return the desired callback value. To ensure the correct functioning of the cards, only callbacks generated via 'get' should be used. |
withCardon
OptionswithCardon
also accepts an options object as a second parameter.
Name | Type | Default Value | Description |
---|---|---|---|
destroyOnHide | boolean | false | If set to true, the component will be destroyed when hidden. If left unchanged, the component will remain on the root and must be manually hidden using the 'visible' property. |
key | string (optional) | - | A unique identifier for the card. This key can be used to control the visibility of a specific card using the Cardon.hide(key) method. |
When called, each card returns two functions named 'show'
and 'hide'
.
withCardon
methods after wrappingName | Type | Description |
---|---|---|
show | (props?: P, callback?: (result: R) => void) => Promise<R> | The function to show the card. It returns a promise with data and waits until the card is closed or can utilize the callback function provided as the second parameter. The card is automatically hidden after the result is returned. |
hide | () => void | Allows the card to be cancelled and hidden without waiting for data to return. Typically, this doesn't need to be used but can be situationally helpful. |
withCardon
can also receive options with its second parameter as withCardon(component, options)
.
Cardon exports a Cardon
class with utility methods.
import Cardon from "cardon";
Method | Description |
---|---|
Cardon.clear() | Clears all visible cards. |
Cardon.hide(key: string) | Hides a specific card. The card must have a unique key assigned during creation using the 'withCardon' method. |
Here are a few simple steps to use Cardon:
CardonContainer
component to the root file.// App.js
function App() {
return (
<div>
<Main />
+ <CardonContainer />
</div >
);
}
export default App;
Create a folder named 'cardon' or any name of your choosing and place your cards within this folder.
Wrap the component you want to use as a card as shown in the example below.
// ./cardon/MyModalCard.jsx
import { withCardon } from "cardon";
import React from "react";
function MyModalCard({ visible, get, title }) {
return (
<Modal open={visible} onClose={get(null)}>
My Reusable '{title}' Modal!
<button onClick={get(true)}>Yes</button>
<button onClick={get(false)}>No</button>
</Modal>
);
}
export default withCardon(MyModalCard);
Or with TypeScript:
// ./cardon/MyModalCard.tsx
import { withCardon } from "cardon";
import React from "react";
interface Props {
title: string;
}
function MyModalCard({ visible, get, title }) {
return (
<div>
My Reusable '{title}' Card!
<button onClick={get(true)}>Yes</button>
<button onClick={get(false)}>No</button>
</div>
);
}
export default withCardon<Props, boolean>(MyModalCard);
You can alternatively use a card with 'destroyOnHide' options (This is necessary if the card doesn't use the 'visible' prop):
// ./cardon/MyModalCard.jsx
import React from "react";
import { withCardon } from "cardon";
function MyModalCard({ get, title }) {
return (
<div>
My Reusable '{title}' Card!
<button onClick={get(true)}>Yes</button>
<button onClick={get(false)}>No</button>
</div>
);
}
export default withCardon(MyModalCard, { destroyOnHide: true });
let result = await MyModalCard.show({ title: "Awesome" });
Here's an example of usage:
import React from "react";
import { MyModalCard } from "./cardon/MyModalCard";
function HomePage() {
const [modalResult, setModalResult] = React.useState(false);
const showModal = async () => {
let result = await MyModalCard.show({ title: "Awesome" });
setModalResult(result);
};
return (
<>
{modalResult ? "Yes" : "No"}
<button onClick={showModal}>Show</button>
</>
);
}
You can also use the Cardon class like this:
import Cardon from "cardon";
Cardon.hide("my-modal-card-key");
// or clear all visible cards
Cardon.clear();
Check here for the API document
MIT - Mustafa Kuru
FAQs
Create reusable React cards, pop-ups or modals with asynchronous functionality
The npm package cardon receives a total of 11 weekly downloads. As such, cardon popularity was classified as not popular.
We found that cardon 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
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.