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

Mustafa KURU — Wed, 05 May 2021 14:50:47 +0000

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.

Demo

Conclusion

I’ve covered a different way of managing cards and showing them again easily.
Thank you in advance for your comments and support.
GitHub Project link

Mustafa KURU — Wed, 28 Apr 2021 02:21:52 +0000

Introduction

Many projects contain asynchronous calls. The operation of these may be unaware of the user, or the user may need to know about that status.

In order to notify the user of this, the loading component is shown on the screen and the user is informed that something is running. At this point, the management of asynchronous methods should be managed in various ways and the component should be demonstrated.

Today, I will show you how you can handle this in an easy way with loadio.

loadio

This package is a simple to use tool that allows you to manage status information with promises.

Install it with:

# Yarn
$ yarn add loadio

# NPM
$ npm install loadio

Wrap the method you want to follow the status information.

import { withPool } from "loadio"; 
const fetch = withPool(global.fetch);

Or add promise directly into it with PoolManager

import { PoolManager } from "loadio"; 
PoolManager.append(fetch("get/data"));

And that's all. You can easily view the status on your home page by calling the new method you have wrapped in place of the old one.

import { useStatus } from "loadio";
function HomePage() {
  const status = useStatus();
  return (
    <>
      {status.isLoading ? "Loading..." : "Loaded!"}
      <button onClick={() => myWrappedfetch("get/data")}>Get</button>
    </>
  );
}

It also generates a percentage of information according to the number of tasks.

{
    isLoading?: boolean,
    percentage?: number,
    runningTasks?: number
}

A complete example with React Component is as follows.

import React from "react";
import { withPool, withStatus } from "loadio"; 
const fetch = withPool(global.fetch);

class HomePage extends React.Component {

  render(){
    const { isLoading, percentage } = this.props;  
    return (
      <>
        {isLoading ? "Loading..." : "Loaded!"}
        {percentage + "%"}
        <button onClick={() => fetch("get/data")}>Get</button>
      </>
    );
  }
}
export default withStatus(HomePage);

Demo

Conclusion

By wrapping promise methods or else adding them directly, we have made it easy to show the loading status with percentage information.
You can view the details of the package by clicking here.
Thanks.

DEV Community: Mustafa KURU

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

Introduction

Example

Example reusable card:

Or with Typescript:

Example call:

Example call usage:

Demo

Conclusion

Read Also

Managing loading status for React is much easier with loadio

Introduction

loadio

Demo

Conclusion