这样使用React弹窗会更方便 -- use-modal

主流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

NameTypeDefaultDescription
showbooleanfalse是否显示modal
closeModal

关闭modal,将 show 设置为false

转载于:https://juejin.im/post/5c94fe62f265da610762f7c7

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值