react-pop-page v1.0.6

react-pop-page

React 弹出层组件，函数触发，不污染 DOM。

• 弹出层默认会产生浏览器历史，支持通过浏览器的回退按钮关闭。

安装

  $ npm install react-pop-page
  // or
  $ yarn add react-pop-page

DEMO

React-Pop-Page

引用

  import popPage from 'react-pop-page'

使用方法

popPage(ReactNode, props)

  const Layer = <div>content</div>

  // 基础用法
  popPage(Layer)

  // 其他方向弹出
  popPage(Layer, { target: 'up' })    // 上
  popPage(Layer, { target: 'down' })  // 下
  popPage(Layer, { target: 'left' })  // 左
  popPage(Layer, { target: 'right' }) // 右

  // 调整关闭位置
  popPage(Layer, { closePosition: 'left' }) // 右

  // 自定义关闭
  popPage(<div />, { closeComponent: <span>关闭</span> })

  // 隐藏关闭
  popPage(<div />, { enableClose: false })

  // 不启用浏览器历史
  popPage(<div />, { enableHash: false })

  // 关闭时处理逻辑
  popPage(<div />, { handleClose: () => {} })

  // 子组件关闭弹出层
  const ChildPage = ({ handleContainerClose }) => (<div onClick={ handleContainerClose }></div>)

  popPage(<ChildPage />)

可配置的Props