modal.react.js Library

What is it?

modal.react.js is a library that allows you to create smart, customizable, and reusable modal windows with React. The library is written in TypeScript and provides a simple API to create and manage modal windows in your application with ease.

Features

• Create and manage modals using an easy to use API.
• Customize the look of your modals by passing your own components.
• Handle the state of your modals with built-in hooks.
• Implement endless modals with multiple areas.

Usage

Creating a ModalsArea:

Before you can create a modal window, you must create at least one ModalsArea component. This component will be responsible for rendering all the modals that you create in your application.

import { createArea, ModalsArea } from 'modal.react.js';

export const area = createArea();

function App() {
  return (
    <div>
      <ModalsArea area={area} />
      {/* Insert your application code here */}
    </div>
  );
}

Creating a Modal window:

To create a modal window, you need to use the createModal function. This function takes two parameters: the area where the modal should be rendered and an optional object with configuration options.

import { createModal } from 'modal.react.js';

const m1 = createModal(area);
const res = m1.show(<YourModalComponent />);
await m1.close();

Customizing the Modal:

You can customize the look of the modal by passing your own components as children to the Modal component. You can also use the onComplete prop to handle actions when the modal is closed.

import { Modal } from 'modal.react.js'

function MyCustomModal(props) {
  return (
    <div className="my-custom-modal">
      {props.children}
    </div>
  )
}

function App() {
  return (
    <Modal area={area} onComplete={() => console.log('Modal closed.')}>
      <MyCustomModal>
        <p>Hello World</p>
      </MyCustomModal>
    </Modal>
  )
}

Using Hooks:

The library has built-in hooks to help you handle the state and behavior of your modal windows.

useFlowValue

The useFlowValue hook allows you to specify the initial, live, and unmount values of an element. You can use this hook to create animations or transitions for your modals.

import {useFlowValue } from 'modal.react.js'

function MyCustomModal(props) {
  const time = 500;
  const flow = useFlowValue(
    time, /* animation time in ms */
    0, /* initial */
    1, /* after render */
    0 /* before unmount */
  );

  return (
    <div style={{ opacity: flow, transition: `${time}ms` }}>
      {props.children}
    </div>
  )
}

useCompleteModal

The useCompleteModal hook allows you to handle the completion of your modals. It returns a complete object with two functions: success and fail. You can call one of these functions to handle successful or unsuccessful completion of your modal window.

import { useState } from 'react';
import { useCompleteModal } from 'modal.react.js';

function MyCustomModal(props) {
  const [state, setState] = useState('');
  const complete = useCompleteModal<string>();

  function handleClick() {
    complete.success(state);
  }

  return (
    <div>
      <input value={state} onChange={(e) => setState(e.target.value)} />
      <button onClick={() => handleClick()}>Done</button>
    </div>
  );
}

showModal function

The showModal function allows you to create a modal window from pure code.

import { showModal } from 'modal.react.js';

async function handleClick(event) {
  const result = await showModal(area, <YourCustomModal />);
  console.log(result);
}

Installation

You can install the library using Yarn or NPM:

• yarn add modal.react.js
• npm i --save modal.react.js

Conclusion

modal.react.js is an easy-to-use and powerful library that helps you to create and manage modals in your React application. Whether you're building a large-scale application or a small one-off project, you can use this library to create beautiful, UX-optimized modals with minimal effort.