Acrool React Modal

Features

• Supports queue modal list
• Plug and unplug using @acrool/react-portal and framer-motion
• Quickly create light box effects and send them to the outside to avoid hierarchical problems
• Support @acrool/react-router-hash lightbox (using createControlledModal)

Install

yarn add @acrool/react-modal

Usage

add in your index.tsx

import "@acrool/react-modal/dist/index.css";

add in your App.tsx

It should be noted that it must be within the scope of Router Provider. Another way is to place it in Layout and Outlet middle layer.

import {ModalPortal} from "@acrool/react-modal";

const App = () => {
    return (
        <div>
            <BaseUsed/>
            <ModalPortal/>
        </div>
    );
};

• Here are two ways to use it
  • A. Custom modal component
  • B. Custom state modal component

A. Custom modal component

Add the lightbox to the display column list by throwing the Show method

Defined Modal

import {animation, createModal, IModalOptions, useModal} from '@acrool/react-modal';

const modalProps: IModalOptions = {
    variants: animation.fadeInDown,
    className: 'p-3'
};

interface IProps {
    myVar: string
}

const PromotionModal = createModal(
    (args: IProps) => {
        const {hide} = useModal();

        return <div>
            <div>Test2 content</div>
            <button type="button" onClick={hide}>X </button>
        </div>;
    }
    , modalProps
);

export default PromotionModal;

Use Modal

then in your page

const ExamplePage = () => {
    return <div>
        <button type="button" onClick={() => PromotionModal.show({myVar: 'Imageine'})}>Show Modal</button>
    </div>
}

B. Custom state modal component

The inside of the light box is controlled by its own state, which is displayed through rendering, such as using HashRouter.

Defined Modal

import {animation, createStateModal, IModalOptions, useModal} from '@acrool/react-modal';
import {useHashParams} from '@acrool/react-router-hash';

const modalProps: IModalOptions = {
    variants: animation.fadeInDown,
    className: 'p-3'
};

interface IProps {
    myVar: string
}

const PromotionHashModal = createStateModal(
    () => {
        const {hide} = useModal();
        const navigate = useNavigate();
        const {id} = useHashParams<{id: string}>();
        
        const handleOnClose = () => {
            hide().then(() => {
                navigate({hash: undefined});
            })
        }

        return <div>
            <div>Test2 content</div>
            <button type="button" onClick={handleOnClose}>Close Modal</button>
        </div>;
    }
    , modalProps
);

export default PromotionHashModal;

Defined Hash Route

It should be noted that it must be within the scope of Router Provider. Another way is to place it in Layout and Outlet middle layer.

import {HashRoute,HashRoutes} from '@acrool/react-router-hash';
import {createBrowserHistory} from 'history';
import {BrowserRouter as Router,Route, Routes} from 'react-router-dom';

const history = createBrowserHistory({window});

const RouterSetting = () => {
    return <Router>

        <Routes>
            <Route path="/" element={<Example/>} />
        </Routes>

        <HashRoutes>
            <HashRoute path="promotion/:id" element={<PromotionHashModal/>}/>
        </HashRoutes>

        {/* Add this */}
        <ModalPortal/>

    </Router>;
};

Use Modal

then in your page

import {useNavigate} from 'react-router-dom';

const ExamplePage = () => {
    const navigate = useNavigate();
    return <div>
        <button type="button" onClick={() => navigate({hash: '/promotion/1'})}>Show Modal</button>
        <button type="button" onClick={() => navigate({hash: '/promotion/2'})}>Show Modal</button>
    </div>
}

• animation
  • fadeInDown: (default), ex Base modal style
  • zoomInDown
  • slideInLeft: ex Drawer slider
  • slideInRight: ex Drawer slider
  • slideInUp: ex Dropdown
  • custom (ref; https://www.framer.com/motion/animate-presence/#usage)

  variants = {
   initial: {opacity: 0, y: -20, transition: {type:'spring'}},
   show: {opacity: 1, y: 0},
   exit: {opacity: 0, y: -40}
  }

There is also a example that you can play with it:

License

MIT © Acrool & Imagine

Refer to

• https://github.com/ebay/nice-modal-react
• https://animate.style