這樣使用React彈窗會更方便 -- use-modal

Aasd發表於2019-03-22
React

主流modal大多需要在元件內使用state控制是否顯示，在多個地方呼叫的時候很不方便，所以基於 context 提供一個更加易用的呼叫方式。

use-modal 支援主流的modal, 理論上只要modal通過類似於 show props 控制顯示的，就可以支援，例如:

原始碼地址: github.com/wowlusitong…

特點

  • 簡單易用
  • 支援react hooks
  • 0依賴

安裝

使用yarn

$ yarn add react-use-modal
複製程式碼

或者用npm

$ npm install react-use-modal --save
複製程式碼

使用

將 ModalProvider 放在元件外層

import ReactDOM from 'react-dom';
import { ModalProvider } from 'react-use-modal';

ReactDOM.render(
  <ModalProvider>
    ...
  </ModalProvider>,
  document.querySelector('#root')
)
複製程式碼

呼叫方式，以react-bootstrap舉例

使用context

import React from 'react';

import { Modal } from 'react-bootstrap';
import { ModalContext } from 'react-use-modal';

export default class App extends React.Component {

  handleClick = () => {
    const {showModal, closeModal} = this.context;
    showModal(({ show }) => (
      <Modal show={show} onHide={closeModal}>
        <Modal.Body>body</Modal.Body>
      </Modal>
    ))
  }

  render() {
    return (
      <button onClick={this.handleClick}>click</button>
    )
  }
}
Product.contextType = ModalContext
複製程式碼

使用hooks

import React from 'react';
import { Modal } from 'react-bootstrap';
import { useModal } from 'react-use-modal';

const App = () => {
  const { showModal, closeModal } = useModal();

  function handleClick() {
    showModal(({ show }) => (
      <Modal show={show} onHide={closeModal}>
        <Modal.Header closeButton>
          <Modal.Title>Modal title</Modal.Title>
        </Modal.Header>
        <Modal.Body>Modal body text goes here.</Modal.Body>
      </Modal>
    ))
  }

  return (
    <button onClick={handleClick}>modal</button>
  )
}
複製程式碼

API

showModal

顯示modal，將 show 設定為true

引數

component(?Function): 第一次呼叫必須傳遞引數，再次呼叫可忽略

showModal(props => (
  <Modal show={show} onHide={closeModal}>
    <Modal.Body>body</Modal.Body>
  </Modal>
))
複製程式碼

元件props

Name Type Default Description
show boolean false 是否顯示modal

closeModal

關閉modal，將 show 設定為false

相關文章