{"id":24263893,"url":"https://github.com/hepter/cardon","last_synced_at":"2026-03-01T03:32:14.864Z","repository":{"id":135921591,"uuid":"364461863","full_name":"hepter/cardon","owner":"hepter","description":"Create reusable React cards, pop-ups or modals with asynchronous functionality","archived":false,"fork":false,"pushed_at":"2023-05-30T02:27:23.000Z","size":287,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-20T00:32:17.494Z","etag":null,"topics":["alert","cards","javascript","popup","react","reactjs","reusable"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hepter.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-05-05T04:35:05.000Z","updated_at":"2023-05-30T02:29:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"e507ccb4-d7e4-46be-8e0f-01429c34da23","html_url":"https://github.com/hepter/cardon","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/hepter/cardon","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hepter%2Fcardon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hepter%2Fcardon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hepter%2Fcardon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hepter%2Fcardon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hepter","download_url":"https://codeload.github.com/hepter/cardon/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hepter%2Fcardon/sbom","scorecard":{"id":461768,"data":{"date":"2025-08-11","repo":{"name":"github.com/hepter/cardon","commit":"fe101066dd198e8e74b30f9aec3c504000eac9a7"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":0,"reason":"Found 0/9 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"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"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"101 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-fjxv-7rqg-78g4","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-76c9-3jph-rj3q","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"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-19T11:18:29.137Z","repository_id":135921591,"created_at":"2025-08-19T11:18:29.137Z","updated_at":"2025-08-19T11:18:29.137Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29959370,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T01:47:18.291Z","status":"online","status_checked_at":"2026-03-01T02:00:07.437Z","response_time":124,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alert","cards","javascript","popup","react","reactjs","reusable"],"created_at":"2025-01-15T08:53:07.785Z","updated_at":"2026-03-01T03:32:14.850Z","avatar_url":"https://github.com/hepter.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![cardon](https://github.com/hepter/cardon/raw/master/docs/cardon.png)\n\n[![Npm Version][npm-version-image]][npm-version-url] [![License][license-image]][license-url]\n\n# Cardon: Reusable Asynchronous Functional Cards\n\nCardon is a tool that allows you to create reusable cards that can be used as asynchronous functions on any screen.\n\n## Demo\n\nYou can check out a live demo of Cardon on CodeSandbox.\n\n[![Edit Example Usage - cardon](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/example-usage-cardon-u60wc?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n## Installation\n\nTo use Cardon in your project, install it as a dependency using either Yarn or NPM.\n\n```shell\n# Yarn\n$ yarn add cardon\n\n# NPM\n$ npm install cardon\n```\n\n## How to Use Cardon\n\nCardon provides two primary methods, `'CardonContainer'` and `'withCardon'`, for usage.\n\n| Component Name  | Description                                                                                                                                                       |\n| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| CardonContainer | It creates an instance for the cards. All cards are displayed within this container.                                                                              |\n| 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. |\n\n### `withCardon` Injected props\n\n`withCardon` adds several props to the component it wraps.\n\n| Name    | Type          | Description                                                                                                                                                                                                                            |\n| ------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| visible | boolean       | This property controls the visibility of the card. It toggles based on the invocation of the `'show'` or `'hide'` function.                                                                                                            |\n| 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. |\n\n### `withCardon` Options\n\n`withCardon` also accepts an options object as a second parameter.\n\n| Name          | Type              | Default Value | Description                                                                                                                                                                     |\n| ------------- | ----------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| 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. |\n| 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.                                        |\n\nWhen called, each card returns two functions named `'show'` and `'hide'`.\n\n##### `withCardon` methods after wrapping\n\n| Name | Type                                                       | Description                                                                                                                                                                                                                            |\n| ---- | ---------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| show | (props?: P, callback?: (result: R) =\u003e void) =\u003e Promise\\\u003cR\u003e | 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. |\n| hide | () =\u003e 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.                                                                               |\n\n`withCardon` can also receive options with its second parameter as `withCardon(component, options)`.\n\n## Cardon Class\n\nCardon exports a `Cardon` class with utility methods.\n\n```js\nimport Cardon from \"cardon\";\n```\n\n| Method                   | Description                                                                                                    |\n| ------------------------ | -------------------------------------------------------------------------------------------------------------- |\n| Cardon.clear()           | Clears all visible cards.                                                                                      |\n| Cardon.hide(key: string) | Hides a specific card. The card must have a unique key assigned during creation using the 'withCardon' method. |\n\n## Example\n\nHere are a few simple steps to use Cardon:\n\n1. Add the `CardonContainer` component to the root file.\n\n```diff\n// App.js\nfunction App() {\n  return (\n    \u003cdiv\u003e\n       \u003cMain /\u003e\n+      \u003cCardonContainer /\u003e\n    \u003c/div \u003e\n  );\n}\nexport default App;\n```\n\n2. Create a folder named 'cardon' or any name of your choosing and place your cards within this folder.\n\n3. Wrap the component you want to use as a card as shown in the example below.\n\n```jsx\n// ./cardon/MyModalCard.jsx\nimport { withCardon } from \"cardon\";\nimport React from \"react\";\n\nfunction MyModalCard({ visible, get, title }) {\n  return (\n    \u003cModal open={visible} onClose={get(null)}\u003e\n      My Reusable '{title}' Modal!\n      \u003cbutton onClick={get(true)}\u003eYes\u003c/button\u003e\n      \u003cbutton onClick={get(false)}\u003eNo\u003c/button\u003e\n    \u003c/Modal\u003e\n  );\n}\nexport default withCardon(MyModalCard);\n```\n\nOr with TypeScript:\n\n```tsx\n// ./cardon/MyModalCard.tsx\nimport { withCardon } from \"cardon\";\nimport React from \"react\";\n\ninterface Props {\n  title: string;\n}\nfunction MyModalCard({ visible, get, title }) {\n  return (\n    \u003cdiv\u003e\n      My Reusable '{title}' Card!\n      \u003cbutton onClick={get(true)}\u003eYes\u003c/button\u003e\n      \u003cbutton onClick={get(false)}\u003eNo\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\nexport default withCardon\u003cProps, boolean\u003e(MyModalCard);\n```\n\nYou can alternatively use a card with 'destroyOnHide' options (This is necessary if the card doesn't use the 'visible' prop):\n\n```jsx\n// ./cardon/MyModalCard.jsx\nimport React from \"react\";\nimport { withCardon } from \"cardon\";\n\nfunction MyModalCard({ get, title }) {\n  return (\n    \u003cdiv\u003e\n      My Reusable '{title}' Card!\n      \u003cbutton onClick={get(true)}\u003eYes\u003c/button\u003e\n      \u003cbutton onClick={get(false)}\u003eNo\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\nexport default withCardon(MyModalCard, { destroyOnHide: true });\n```\n\n4. Import the component and call the 'show' function to display it. Optionally, you can pass props to the card and asynchronously receive the result.\n\n```jsx\nlet result = await MyModalCard.show({ title: \"Awesome\" });\n```\n\nHere's an example of usage:\n\n```jsx\nimport React from \"react\";\nimport { MyModalCard } from \"./cardon/MyModalCard\";\nfunction HomePage() {\n  const [modalResult, setModalResult] = React.useState(false);\n  const showModal = async () =\u003e {\n    let result = await MyModalCard.show({ title: \"Awesome\" });\n    setModalResult(result);\n  };\n\n  return (\n    \u003c\u003e\n      {modalResult ? \"Yes\" : \"No\"}\n      \u003cbutton onClick={showModal}\u003eShow\u003c/button\u003e\n    \u003c/\u003e\n  );\n}\n```\n\nYou can also use the Cardon class like this:\n\n```js\nimport Cardon from \"cardon\";\n\nCardon.hide(\"my-modal-card-key\");\n// or clear all visible cards\nCardon.clear();\n```\n\n## API\n\nCheck [here](https://hepter.github.io/cardon/modules) for the API document\n\n## Changelog\n\n### v1.0.3\n\n- 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.\n- 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.\n- Fixed an issue where a component wrapped with withCardon would not display after being modified.\n- Resolved an issue where the hide() function for cards was not working.\n\n### v1.0.1\n- Minor fixes\n\n### v1.0.0\n- Initial release\n## License\n\nMIT - Mustafa Kuru\n\n[license-image]: http://img.shields.io/npm/l/cardon.svg\n[license-url]: LICENSE\n[npm-version-image]: https://img.shields.io/npm/v/cardon.svg\n[npm-version-url]: https://www.npmjs.com/package/cardon\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhepter%2Fcardon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhepter%2Fcardon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhepter%2Fcardon/lists"}