cardon

About

Create reusable asynchronous functional cards.

Allows to create the cards used on the pages once and allows them to be called as an async function on all screens.

Demo

Installation

Install cardon as a dependency

# Yarn

$ yarn add cardon


# NPM

$ npm install cardon

Usage

You only need the 'CardonContainer' and 'withCardon' methods to use the it.

CardonContainer

Creates an instance for the cards and all cards are displayed inside here.

withCardon

Wraps the component you want to show as a card and injects properties named 'visible' and 'get' inside it and then returns an interface to use it.

{
  visible:(args?: any) => Promise<any>,
  get: (returnValue?:any) => Function
}

Every card returns two functions named 'show' and 'hide' when called it

{
  show:(args?: any) => Promise<any>,
  hide:() => void
}

get:

The prop is a callback generator function and all callback function must be created by calling the 'get' function to return the desired callback value. Only created callback functions via 'get' should be used in cards to works properly.

visible:

The prop indicates whether the card should be visible or not. This value will change according to the call of the 'show' or 'hide' function

show:

The function to be called to show the card. It returns a promise with the data and waits until the card is closed or can be used the callback function with the second parameter. The card will be hidden automatically after the result return it.

hide:

Allows the card to be canceled and hidden without waiting for data to return. It does not need to be used generally, but can be used according to the situation.

Example

There are few simple steps to use:

• Put the 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 and after put your cards there.

• Wrap the component you want to use as a card like below

Example reusable card:

// ./cardon/MyModalCard.js
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.js
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)

Alternative card usage with 'destroyOnHide' options: (It is required to destroy the card if the card is not using the 'visible' prop)

// ./cardon/MyModalCard.js
import React from "react";
import { withCardon } from "cardon";

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(MyModalCard, { destroyOnHide: true });

• Import the component and call the 'show' function to show it, pass props as optional to card and get the result asynchronously

Example call:

 let result = await MyModalCard.show({ title: "Awesome" });

Example 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>
    </>
  );
}

API

Check here for the API document

License

MIT - Mustafa Kuru