React Popup

react的弹窗的库

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>
);
updatedupdated2020-10-122020-10-12

keywords: popup