React Popup

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>
);

 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>
);

 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>
);