Acrool React Modal

This is a toast message function for React development notifications

^1.1.0 support react >=19.0.0 <20.0.0, framer-motion@12

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)
- Modal open auto add acrool_model-open body overflow style class
- export BodyScroll utils (state control)

Install

``bash
yarn add @acrool/react-modal framer-motion@12
`

in your packages.

`json
{
"resolutions": {
"framer-motion": "^12.x"
}
}
`

> ⚠️ If you do not rely on the project's internal framer-motion, the internal self-implemented AnimatePresence will be affected and produce unexpected results.

Usage

add in your index.tsx
`tst
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.


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

const App = () => {
return (


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

interface IProps {
myVar: string
}

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

return

export default createModal(
PromotionModal,
{
animation: animation.generateFadeInFromTop()
},
);
`

Use Modal

then in your page

`tsx
const ExamplePage = () => {
return

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


const PromotionHashModal = () => {
const {hide} = useModal();
const navigate = useNavigate();
const {id} = useHashParams<{id: string}>();

useEffect(() => {
return () => {
navigate({...location, hash: undefined});
};
}, []);

const handleOnHide = () => {
hide();
};

// const handleOnClose = () => {
// hide().then(() => {
// navigate({hash: undefined});
// })
// }

return

export default createStateModal(
PromotionHashModal,
{
animation: animation.generateFadeInFromTop(),
isHideWithMaskClick: true,
},
);
`


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.

`tsx
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


} />



}/>


{/ Add this /}


;
};
`

Use Modal

then in your page

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

const ExamplePage = () => {
const navigate = useNavigate();
return

- 😁 Animation Sample
- 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)
`tsx
variants = {
initial: {opacity: 0, y: -20, transition: {type:'spring'}},
animate: {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