sm-modal
This library does not provide any UI, but instead offers a convenient way to render modal components defined elsewhere.
Table of Contents
Install
npm install --save sm-modal
Usage
Modal
component
Use import { useState } from 'react'
import { Modal } from 'sm-modal'
const HomePage: React.FC = () => {
const [showModal, setShowModal] = useState < boolean > false
const handleShowModal = () => {
setShowModal(true)
}
return (
<div>
<h1>Home Page</h1>
<button onClick={handleShowModal}>Show modal</button>
<Modal show={showModal} onClose={() => setShowModal(false)}>
<div>Modal content</div>
</Modal>
</div>
)
}
export default HomePage
ModalProvider
to provide modal context:
Use import React from 'react'
import ReactDOM from 'react-dom'
import { ModalProvider } from 'sm-modal'
import App from './App'
ReactDOM.render(
<ModalProvider>
<App />
</ModalProvider>,
document.getElementById('root')
)
Call useModal
with the dialog component of your choice.
import { useModal } from 'sm-modal'
const HomePage: React.FC = () => {
const { showModal } = useModal()
const handleShowModal = () => {
showModal(<div>Modal content</div>)
}
return (
<div>
<h1>Home Page</h1>
<button onClick={handleShowModal}>Show modal</button>
</div>
)
}
export default HomePage
Advance
Custom config of ModalProvider
import React from 'react'
import { ModalProvider } from 'sm-modal'
import HomePage from './pages/HomePage'
function App() {
return (
<ModalProvider
configs={{
cancelText: 'Cancel',
closable: true,
closableWithEsc: true,
maskClosable: true,
okText: 'Submit',
title: 'Custom title',
width: '500px',
zIndex: 10
}}
>
<HomePage />
</ModalProvider>
)
}
export default App
License
MIT © pcsaovang