Never write React Pop-up Cards/Modals more than once anymore!

Introduction

In today’s post, I will tell about a package that I use as a similar one for myself and that I have converted to a package and published for the React Community.

When developing an application with React, sometimes needs to show a pop-up-like window on the screen. This need can be easy depending on the packages used, and occasionally it can be troublesome. We usually want to manage and use a Component that we want to display on the screen as a modal or pop-up, by putting it in one place.

There are many ways to reuse the component in the root directory. In order to be used again, the created components probably need to be defined in root again, but in this case, we may have to edit and update the main component in the root directory. Those components may sometimes need to be in large numbers, and we may need to get fresh information from the user with these screens each time.

The cardon, which is developed to solve these problems and to provide easy use, allows the container component to be added to the root component once and displayed the pop-up-like cards created to be displayed on the screen.

Using these cards created to be displayed at the same time is as easy as calling a function. Also, doesn’t need to edit any files to add a new Card Component. Optionally, the function could call with parameters and waits asynchronously until the card is closed. Let’s represent this with an example application.

Example

First, Install cardon as a dependency

# Yarn
$ yarn add cardon

# NPM
$ npm install cardon

Put the CardonContainer component to the root file

// App.jsx
import { CardonContainer } from "cardon";
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.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)

Import the component and call the following functions everywhere, and Voila!

Example call:

let result = await MyModalCard.show({ title: "Awesome" });
//...
//...
// Not required for hiding it, but might need to hide manually for some cases before user action.
MyModalCard.hide();

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

One of the key points here is the function named 'get(result:any)=>VoidFunction', which provides the creation of functions that enable returning values. We must create and use callback functions for the value to be returned with the help of this function.

You can find a more detailed description on the project's own page.