Gathering detailed insights and metrics for cardon
Gathering detailed insights and metrics for cardon
Create reusable React cards, pop-ups or modals with asynchronous functionality
Installations
npm install cardonDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
16.18.1
NPM Version
8.19.2
Releases
3
Languages
4
JavaScript
TypeScript
HTML
CSS
JavaScript (86.49%)
TypeScript (10.28%)
HTML (2.1%)
CSS (1.13%)
Developer
hepter
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
7 Stars
9 Commits
2 Forks
1 Watchers
1 Branches
1 Contributors
Updated on May 30, 2023
Maintainers
1
Package Meta Information
Latest Version
1.0.3
Package Id
cardon@1.0.3
Unpacked Size
27.13 kB
Size
7.14 kB
File Count
18
NPM Version
8.19.2
Node Version
16.18.1
Published on
May 30, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
5
Cardon: Reusable Asynchronous Functional Cards
Cardon is a tool that allows you to create reusable cards that can be used as asynchronous functions on any screen.
Demo
You can check out a live demo of Cardon on CodeSandbox.
Installation
To use Cardon in your project, install it as a dependency using either Yarn or NPM.
1# Yarn 2$ yarn add cardon 3 4# NPM 5$ npm install cardon
How to Use 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 props
withCardon 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 Options
withCardon 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 wrapping
| Name | 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 Class
Cardon exports a Cardon class with utility methods.
1import 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. |
Example
Here are a few simple steps to use Cardon:
- Add the
CardonContainercomponent to the root file.
1// App.js 2function App() { 3 return ( 4 <div> 5 <Main /> 6+ <CardonContainer /> 7 </div > 8 ); 9} 10export 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.
1// ./cardon/MyModalCard.jsx 2import { withCardon } from "cardon"; 3import React from "react"; 4 5function MyModalCard({ visible, get, title }) { 6 return ( 7 <Modal open={visible} onClose={get(null)}> 8 My Reusable '{title}' Modal! 9 <button onClick={get(true)}>Yes</button> 10 <button onClick={get(false)}>No</button> 11 </Modal> 12 ); 13} 14export default withCardon(MyModalCard);
Or with TypeScript:
1// ./cardon/MyModalCard.tsx 2import { withCardon } from "cardon"; 3import React from "react"; 4 5interface Props { 6 title: string; 7} 8function MyModalCard({ visible, get, title }) { 9 return ( 10 <div> 11 My Reusable '{title}' Card! 12 <button onClick={get(true)}>Yes</button> 13 <button onClick={get(false)}>No</button> 14 </div> 15 ); 16} 17export 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):
1// ./cardon/MyModalCard.jsx 2import React from "react"; 3import { withCardon } from "cardon"; 4 5function MyModalCard({ get, title }) { 6 return ( 7 <div> 8 My Reusable '{title}' Card! 9 <button onClick={get(true)}>Yes</button> 10 <button onClick={get(false)}>No</button> 11 </div> 12 ); 13} 14export default withCardon(MyModalCard, { destroyOnHide: true });
- Import the component and call the 'show' function to display it. Optionally, you can pass props to the card and asynchronously receive the result.
1let result = await MyModalCard.show({ title: "Awesome" });
Here's an example of usage:
1import React from "react"; 2import { MyModalCard } from "./cardon/MyModalCard"; 3function HomePage() { 4 const [modalResult, setModalResult] = React.useState(false); 5 const showModal = async () => { 6 let result = await MyModalCard.show({ title: "Awesome" }); 7 setModalResult(result); 8 }; 9 10 return ( 11 <> 12 {modalResult ? "Yes" : "No"} 13 <button onClick={showModal}>Show</button> 14 </> 15 ); 16}
You can also use the Cardon class like this:
1import Cardon from "cardon";
2
3Cardon.hide("my-modal-card-key");
4// or clear all visible cards
5Cardon.clear();API
Check here for the API document
Changelog
v1.0.3
- Added a new optional prop 'key' to the 'withCardon' method. This key is used to uniquely identify a card for specific operations, such as hiding the card.
- Introduced a new class 'Cardon' with utility methods for managing cards. The Cardon class includes the methods 'clear', which removes all visible cards, and 'hide', which hides a specific card given its unique key.
License
MIT - Mustafa Kuru
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 0/9 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
99 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
- Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
- Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
- Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-33f9-j839-rf8h
- Warn: Project is vulnerable to: GHSA-c36v-fmgq-m8hx
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
1.7
/10
Last Scanned on 2025-07-14
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More