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.

withCardon adds several props to the component it wraps.

withCardon also accepts an options object as a second parameter.

When called, each card returns two functions named 'show' and 'hide'.

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";

Here are a few simple steps to use Cardon:

1. Add the CardonContainer component to the root file.

// App.js
function App() {
  return (
    <div>
       <Main />
+      <CardonContainer />
    </div >
  );
}
export default App;

2. Create a folder named 'cardon' or any name of your choosing and place your cards within this folder.

3. 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 });

4. Import the component and call the 'show' function to display it. Optionally, you can pass props to the card and asynchronously receive the result.

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

• 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.
• Fixed an issue where a component wrapped with withCardon would not display after being modified.
• Resolved an issue where the hide() function for cards was not working.

• Minor fixes

• Initial release

MIT - Mustafa Kuru