React Popup

React Popup 是一个弹窗组件的库。

安装 #

yarn add reactjs-popup

npm install reactjs-popup

基本用法 #

contentStyle：设置内容区的样式
overlayStyle：设置遮罩的样式

占位弹窗1 #

1
2
3
4
5
6
7
8


import React from "react";
import Popup from "reactjs-popup";

const PopupExample = () => (
  <Popup trigger={<button> Trigger</button>} position="right center">
    <div>Popup content here !!</div>
  </Popup>
);

占位弹窗2 #

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


const PopupExample = () => (
  <Popup trigger={<button>Trigger</button>} position="top left">
    {close => (
      <div>
        Content here
        <a className="close" onClick={close}>
          &times;
        </a>
      </div>
    )}
  </Popup>
);

受控Modal #

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


const Modal = () => (
   <div>
    <button className="button" onClick={this.openModal}>
      Controlled Popup
    </button>
    <Popup
      open={this.state.open}
      closeOnDocumentClick
      onClose={this.closeModal}
    >
      <div className="modal">
        <a className="close" onClick={this.closeModal}>&times;</a>
        <span>666</span>
      </div>
    </Popup>
  </div>
);