https://github.com/acrool/acrool-react-modal
react create modal method
https://github.com/acrool/acrool-react-modal
model react-model react-portal reactjs route-hash-modal typescript
Last synced: 17 days ago
JSON representation
react create modal method
- Host: GitHub
- URL: https://github.com/acrool/acrool-react-modal
- Owner: acrool
- License: mit
- Created: 2024-07-15T01:43:52.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-10-22T06:18:15.000Z (6 months ago)
- Last Synced: 2024-10-23T10:07:12.262Z (6 months ago)
- Topics: model, react-model, react-portal, reactjs, route-hash-modal, typescript
- Language: TypeScript
- Homepage: https://acrool-react-modal.pages.dev/
- Size: 499 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-react - Acrool React Modal - React Modal Creator (React underlying structure)
- awesome-react - Acrool React Modal - React Modal Creator (React underlying structure)
README
# Acrool React Modal
This is a toast message function for React development notifications
[](https://www.npmjs.com/package/@acrool/react-modal)
[](https://github.com/acrool/@acrool/react-modal/blob/main/LICENSE)
[](https://github.com/acrool/react-modal/blob/main/LICENSE)
[](https://www.npmjs.com/package/@acrool/react-modal)
[](https://www.npmjs.com/package/@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](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 framer-motion @acrool/react-modal
```
in your packages. (Make the version of styled-component you use match the version of styled-component used in acrool-react-gird)
```json
"resolutions": {
"framer-motion": "^11.x"
}
```
## 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
X
;
}
export default createModal(
PromotionModal,
animation.generateFadeInFromTop(),
);
```
***Use Modal***
then in your page
```tsx
const ExamplePage = () => {
return
PromotionModal.show({myVar: 'Imageine'})}>Show Modal
}
```
## 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
Close Modal
;
}
export default createStateModal(
PromotionHashModal,
{
...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
navigate({hash: '/promotion/1'})}>Show Modal
navigate({hash: '/promotion/2'})}>Show Modal
}
```
- [animation](src/animation.ts)
- 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:
[](https://acrool-react-modal.pages.dev)
## License
MIT © [Acrool](https://github.com/acrool) & [Imagine](https://github.com/imagine10255)
## Refer to
- [https://github.com/ebay/nice-modal-react](https://github.com/ebay/nice-modal-react)
- [https://animate.style](https://animate.style)