DEV Community: raotaohub

Magic of Type Inference in React Modals with EasyModal

raotaohub — Fri, 22 Dec 2023 15:12:40 +0000

Are you a React developer who has struggled through the verbose and convoluted patterns of managing modal dialogs? Have you ever longed for a way to seamlessly integrate modals into your application logic while maintaining crisp type-safety with TypeScript? Enter EasyModal—a revolutionary tool that not only simplifies modal management but astonishes with its ability to infer types gracefully.

Level Up Your Modals with Promises and TypeScript

EasyModal's philosophy is simple: Treat modals as asynchronous events and manage their lifecycle through promises. This approach leads to cleaner, more predictable code where the handling of modal actions like opening, updating, and closing becomes as natural as writing an async function.

With TypeScript, EasyModal takes the possibilities a step further. By extending InnerModalProps<T> and using a generic T, you harness the power of type inference, effectively enabling your modals to guarantee the type of data they resolve with.

How EasyModal Works

EasyModal consists of several hooks and components that work together to bring this functionality into your React apps:

useModal hook to access modal-related actions and state within your component.
show, update, hide, and remove functions to control modals from anywhere in your code.
create function to generate a High Order Component (HOC) for your modal components.

With EasyModal, showing a modal becomes as simple as calling show() with your modal component and potential props. The show() function returns a promise that resolves or rejects based on the user's interaction with the modal.

Getting Started with EasyModal

To integrate EasyModal into your React application, start by wrapping your app with the EasyModal.Provider. This sets up the context for managing the modals:

import { EasyModal } from 'ez-modal-react';

function App() {
  return (
    <EasyModal.Provider>
      {/* Your app components */}
    </EasyModal.Provider>
  );
}

Real-World Type Inference with EasyModal

Let's dive into a realistic scenario illustrating the prowess of EasyModal's type inference system. Consider an interactive user form encapsulated in a modal dialog—a common need in today's applications.

// Define your modal props and the type they resolve with.
interface Props extends InnerModalProps<string> {
  name: string;
  age: number;
}

// Create your modal with EasyModal.
export const UserInfoModal = EasyModal.create((props: Props) => {
  const modal = useModal<Props>();
  const [remark, setRemark] = useState('');

  // A handling function that simulates data processing and hides the modal.
  const handleSave = async () => {
    try {
      const val = await new Promise((resolve) => {
        setTimeout(() => {
          resolve('Data processed: ' + remark);
        }, 1000);
      });

      // Close the modal and pass resolved data back. The type is guaranteed!
      modal.hide(remark);
      console.log('Operation successful: ' + val);
    } catch (error) {
      // Error handling...
    }
  };

  // The rendered modal component with all its interactions.
  return (
    <Modal title="User Information" open={modal.visible} onOk={() => handleSave()} onCancel={() => modal.hide(null)}>
      Name: {props.name}!
      <div>
        Remark:
        <Input value={remark} onChange={(e) => setRemark(e.target.value)} />
      </div>
    </Modal>
  );
});

Here's how you would open this modal and use the type-inferred value upon closure:

<Button
  onClick={async () => {
    // Open the UserInfoModal, passing props, and await the result.
    const userRemark = await EasyModal.show(UserInfoModal, { name: 'happy', age: 19 });

    // userRemark is assured to be a string due to the inferred type.
    console.log('User remark:', userRemark);
  }}
>
  GetUserRemark
</Button>

Advantages of Using EasyModal

With EasyModal, you gain:

Simplified State Management: Manage your modal logic cleanly through promises without messy state variables scattered across components.
Type Safety: By extending InnerModalProps<T> and passing generics, you ensure that the data resolved is of the expected type, thus preventing a whole class of type-related bugs.
Effortless Updates: Invoke EasyModal.update to refresh modal props dynamically, with type-checking ensuring you're setting props compatible with the modal's expectation.
Reusability and Modularity: Create and reuse modals throughout your application, with complex logic nicely encapsulated and type-checked.

Beyond Simple Alerts: Empower Complex Modals

While the traditional use-case for modals includes alerts, confirmations, or simple data entry, EasyModal empowers you to handle complex scenarios. Think of multi-step user onboarding, dynamic forms with real-time validation, or complex selection dialogs with asynchronously fetched data—all maintained with the flow and grace of promise-based logic and the precision of TypeScript typing.

Conclusion

EasyModal offers an inspired blend of promise-based modality and robust type inference, creating an environment where React development is not only about components and state management but also about promises and flow control, all the while securely typed with TypeScript.

For developers aiming to elevate their UI dialogs to be more intuitive and maintainable, EasyModal is the tool to weave into the fabric of your React application. It's a testament to the power of contemporary React development—an art and science of creating user experiences that are both a joy to develop and to use.

So why not leverage the full potential of promises and types for your modals? Embrace EasyModal and transform the way you interact with your users—one promise at a time.

link:
https://github.com/raotaohub/ez-modal-react
⭐️~

Why you need modal state management?

raotaohub — Mon, 19 Jun 2023 12:47:44 +0000

Why you need modal state management?

Using modals in React is a bit frustrating.

If we have a complex modal that contains a large amount of form elements.
Or if we have multiple modal components where the next modal component depends on data processed within the previous modal component.

Imagine the issues this could potentially cause.

Problem and Pain Points

When working with modals in React applications, developers often face the following challenges:

Modal Logic Coupling: The logic for opening, closing, and managing the state of modals is typically scattered throughout the components that use them. This can make the codebase harder to understand and maintain.
Code Organization: Mixing modal logic with other component code can lead to a less organized codebase. Developers may struggle to identify and modify modal-related code when needed.
Return Values: When a modal is closed, developers often need to capture the result or user action that occurred within the modal. Managing the return values from modals can be cumbersome and error-prone.

Problem example

function Order() {
    // ...
    const [visible1,setVisible1] = useState(false)
    const [visible2,setVisible2] = useState(false)
    const [visible3,setVisible3] = useState(false)

    const withModalState1 = useState<any>()
    const withModalState2 = useState<any>()
    const withModalState3 = useState<any>()

    // ...omit the method inside Modal

    // ...omit other the method inside Component

    return (
        <main>
            ...
            <Modal1 hidden={visible1}></* ... */></Modal1>
            <Modal2 hidden={visible2}></* ... */></Modal3>
            <Modal3 hidden={visible3}></* ... */></Modal3>
        </main>
    ) 
}

Solution example:

interface IProps extends InnerModalProps<'ok'/* here is return value's type*/> {
   age: number;
   name: string;
 }

export const InfoModal = EasyModal.create(
 (props: Props) => {
  return (
    <Modal
      title="Hello"
      open={props.visible}
      onOk={() => {
       props.hide('ok'); 
      }}
      onCancel={() => {
      props.hide('cancle'); // ts warn "ok"
      }}
    >
      <h1>{props.age}</h1>
    </Modal>
  );
});

// anywhere use it
EasyModal.show(InfoModal, { name: 'foo' }).then((resolve) => {
  console.log(resolve); // if everything is in order. we will get 'ok' or 'cancle'
});

Why use easy-modal-react ?

easy-modal-react is a library for managing modal components' state in React applications.

It provides a solution to decouple the logic of modal components from other components, resulting in more elegant code organization. It is built on the concept of promises and separates the open, close, and other modal states, passing the return values back to the caller through callback resolves after the modal is closed.

Features:

Zero Dependency Utility: easy-modal-react is a standalone utility written in TypeScript that requires no external dependencies.
Context-Based State Control: Utilizing context, easy-modal-react efficiently controls modal states throughout your entire application.
Promise-Based Handling: Enjoy the benefits of promise-based modal management.
Seamless Component Importing: Effortlessly import modal components throughout your app or use specific component IDs, eliminating the need for explicit imports.
Independent Modal Closure: Close modals from within the component itself, independent of the surrounding code. This flexibility allows you to close modals regardless of their location within the application.
easy-modal-react can be seamlessly integrated with any UI library that offers similar modal functionality,such as Material UI, Ant Design...

🚀 EasyModal Examples

use EasyModal Provider

import EasyModal from 'ez-modal-react';

function App() {/* ... */}

ReactDOM.render(
    <EasyModal.Provider> // wrap your main Componet
      <App />
    </EasyModal.Provider>
  document.getElementById('root'),
);

create modal

import easyModal from 'ez-modal-react';

const InfoModal = EazyModal.create((props) => (
  <Modal open={props.visible} onOk={props.hide} onCancel={props.hide}></Modal>
));

anywhere use it

import easyModal from 'ez-modal-react';
import InfoModal from './InfoModal';

EasyModal.show(InfoModal, { name: 'foo' }).then((resolve) => {
  console.log(resolve);
});

ez-modal-react-demo - CodeSandbox

click title go to playground-demo.
link:
https://codesandbox.io/p/sandbox/confident-shape-rt7bzr?embed=1

API Overview

Easy Modal React exposes several key functions and interfaces for working with modals:

EasyModal.create

The create function is used to create a higher-order component (HOC) for a modal. It takes a React component as input and returns a modal component with enhanced functionality.

Example usage:

const MyModal = EasyModal.create((props) => {
  // Modal component implementation
    const { hide, remove, resolve, reject, prop1, prop2 } = props
});

// Use MyModal component as a modal in your application

EasyModal.show & EasyModal.hide

The show function is used to open a modal. It takes a modal component and optional props as input and returns a promise that resolves with the result when the modal is closed.

Example usage:

EasyModal.show(MyModal, { prop1: 'value1', prop2: 'value2' }).then((result) => {
  // Handle the result returned from the modal
});

The hide function is used to programmatically close a modal. It takes the modal component as input.

Example usage:

EasyModal.hide(MyModal);

EasyModal.remove

The remove function is used to remove a modal from the modal registry. It takes the modal component as input.

Example usage:

EasyModal.remove(MyModal);

useModal Hook

The useModal hook is used within a modal component to access modal-related functionality, such as hiding or removing the modal, resolving the promise, or accessing modal-specific props.

Example usage:

const MyModal = EasyModal.create(() => {
  const { hide, remove, resolve, reject, prop1, prop2 } = useModal();

  // Use the modal-related functionality and props
});

These are the main functions and hooks provided by Easy Modal React to manage modals in your React applications. By using these APIs, you can easily create, show, hide, and remove modals, as well as handle return values and keep your codebase well-organized.

learn more

Conclusion

Because it is open-source, check out this GitHub repository and feel free to contribute any ideas or feature requests to the project to make it even better!

easy-modal-react aims to address these pain points by providing a clean and organized way to manage modal components' state and handle return values.

Give easy-modal-react a try in your next React

A easy modal state manager for React!

raotaohub — Tue, 13 Jun 2023 08:38:17 +0000

Hello everyone! Happy to join this community~

This's my first Post!

Next, I will introduce one of my project~ easy-modal-react!

Problem: Modals & the ceremony around managing them

function Order() {
    // ...
    const [visible1,setVisible1] = useState(false)
    const [visible2,setVisible2] = useState(false)
    const [visible3,setVisible3] = useState(false)
    
    const withModalState1 = useState<any>()
    const withModalState2 = useState<any>()
    const withModalState3 = useState<any>()

    // ...omit the method inside Modal

    // ...omit other the method inside Component

    return (
        <main>
            ...
            <Modal1 hidden={visible1}></* ... */></Modal1>
            <Modal2 hidden={visible2}></* ... */></Modal3>
            <Modal3 hidden={visible3}></* ... */></Modal3>
        </main>
    ) 
}

Solution example:

Separate the state between components and Modal

🚀 EasyModal Examples

use EasyModal Provider

import EasyModal from 'ez-modal-react';

function App() {/* ... */}

ReactDOM.render(
    <EasyModal.Provider> // wrap your main Componet
      <App />
    </EasyModal.Provider>
  document.getElementById('root'),
);

create modal

import easyModal from 'ez-modal-react';

const InfoModal = EazyModal.create((props) => (
  <Modal open={props.visible} onOk={props.hide} onCancel={props.hide}></Modal>
));

anywhere use it

import easyModal from 'ez-modal-react';
import InfoModal from './InfoModal';

EasyModal.show(InfoModal, { name: 'foo' }).then((resolve) => {
  console.log(resolve);
});

That's the core functionality，Here's the better experience

sure, It's support hooks

import EasyModal, { InnerModalProps } from 'ez-modal-react';

// This step is optional,Depends on whether your modal component requires it
interface IProps extends InnerModalProps<'modal'> {
   age: number;
   name: string;
}

export const InfoModal = EasyModal.create((props: Props) => {
  const modal = useModal<Props /* here */>();
  modal.hide(); // (property) hide: (result: 'modal') => void ts(2554)

  return <Moda>/*...*/</Moda>;
});

🎮 Codesandbox Demo

Demo Link

⌨️ Learn More

ez-modal-react