@acrool/react-modal v1.0.0
Acrool React Modal
Features
- Supports queue modal list
- Plug and unplug using
@acrool/react-portal
andframer-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
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)
"resolutions": {
"framer-motion": "^11.x"
}
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 inLayout
andOutlet
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
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 inLayout
andOutlet
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
Refer to
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago