1.0.1 β’ Published 3 years ago
dotoli-popup v1.0.1
Dotoli-Popup Guide
π₯³ νλ©΄μ΄ κ½μ°¬ Modal / Popup
μ μ’ λ νΈνκ³ κΉλνκ² μ°κ³ μΆμ΄ λ§λ λΌμ΄λΈλ¬λ¦¬
μμλ example ν΄λλ₯Ό νμΈ λΆνλ립λλ€.
Install Guide
npm install dotoli-popup
# OR
yarn add dotoli-popup
Getting Started
The Gist
import { render } from 'react-dom';
import popup, { PopupContainer } from 'dotoli-popup';
import Popup from './Popup'; // React Component
const App = () => {
const onClick = () => {
// Popup Open
popup.open({
id: 'popup',
render: Popup,
props: {
header: 'Lorem ipsum',
onCloseClick: () => {
// Popup Close
popup.close('popup');
},
},
onClose: () => console.log('On Close Event'),
backgroundCloseable: true,
onOpen: () => console.log('On Open Event'),
});
};
return (
<div>
<PopupContainer />
<button onClick={onClick}>Open modal</button>
</div>
);
};
render(<App />, document.getElementById('root'));
Use NextJS
// pages/_app.tsx or pages/_app.js
import { AppProps } from 'next/app';
import { PopupContainer } from 'dotoli-popup';
const App = ({ Component, pageProps }: AppProps) => (
<>
<PopupContainer />
<Component {...pageProps} />
</>
);
export default App;
popup.open Props
key | required | default | description |
---|---|---|---|
id | β | νμ IDλ‘ μ’ λ£ λ° popup ꡬλΆμ μ°μ | |
render | β | νμ Component | |
props | νμ Component μ Props | ||
onClose | νμ μ’ λ£ μ μ€ν μ΄λ²€νΈ | ||
onOpen | νμ μ€ν μ μ€ν μ΄λ²€νΈ | ||
backgroundClosealbe | false | νμ Component λ°μ μμ ν΄λ¦ μ μ’ λ£ μ¬λΆ |