`^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](https://github.com/acrool/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 (
);
};
```
- Here are two ways to use it
- [A. Custom modal component](#a-custom-modal-component)
- [B. Custom state 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***
```tsx
import {animation, createModal, IModalOptions, useModal} from '@acrool/react-modal';
interface IProps {
myVar: string
}
const PromotionModal = (args: IProps) => {
const {hide} = useModal();
return
Test2 content
;
}
export default createModal(
PromotionModal,
{
animation: animation.generateFadeInFromTop()
},
);
```
***Use Modal***
then in your page
```tsx
const ExamplePage = () => {
return
}
```
## 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***
```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
Test2 content
;
}
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
