sm-modal

This library does not provide any UI, but instead offers a convenient way to render modal components defined elsewhere.

Demo

Table of Contents

• Install
• Usage
  • Using with component
  • Using with context(hook)
  • Custom configs
• License

Install

npm install --save sm-modal

Usage

Use Modal component

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

Use ModalProvider to provide modal context:

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