This is a toast message function for React development notifications
^1.1.0 support react >=19.0.0 <20.0.0, framer-motion@12
- Supports queue modal list
- Plug and unplug using
@acrool/react-portalandframer-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-openbody overflow style class - export BodyScroll utils (state control)
yarn add @acrool/react-modal framer-motion@12in your packages.
{ "resolutions": { "framer-motion": "^12.x" } }
⚠️ If you do not rely on the project's internalframer-motion, the internal self-implemented AnimatePresence will be affected and produce unexpected results.
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 inLayoutandOutletmiddle layer.
import {ModalPortal} from "@acrool/react-modal"; const App = () => { return ( <div> <BaseUsed/> <ModalPortal/> </div> ); };- Here are two ways to use it
Add the lightbox to the display column list by throwing the Show method
Defined Modal
import {animation, createModal, IModalOptions, useModal} from '@acrool/react-modal'; interface IProps { myVar: string } const PromotionModal = (args: IProps) => { const {hide} = useModal(); return <div> <div>Test2 content</div> <button type="button" onClick={hide}>X </button> </div>; } export default createModal( PromotionModal, { animation: animation.generateFadeInFromTop() }, );Use Modal
then in your page
const ExamplePage = () => { return <div> <button type="button" onClick={() => PromotionModal.show({myVar: 'Imageine'})}>Show Modal</button> </div> }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 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 <div> <div>Test2 content</div> <button type="button" onClick={handleOnClose}>Close Modal</button> </div>; } 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 inLayoutandOutletmiddle 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 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)
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:
