-
Notifications
You must be signed in to change notification settings - Fork 169
/
index.js
96 lines (90 loc) · 2.8 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import React from 'react';
import ReactDOM from 'react-dom';
import ifReact from 'enzyme-adapter-react-helper/build/ifReact';
import { Portal, PortalWithState } from '../src';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isPortalOneActive: false,
isPortalTwoActive: false
};
}
render() {
return (
<div>
<h1>React Portal Examples</h1>
<p>
<a href="https://github.com/tajo/react-portal">
https://github.com/tajo/react-portal
</a>
</p>
<h2>Portal (stateless)</h2>
<button
onClick={() =>
this.setState(prevState => ({
isPortalOneActive: !prevState.isPortalOneActive
}))
}
>
Toggle
</button>
{this.state.isPortalOneActive && (
<Portal>
<p>This thing was portaled!</p>
</Portal>
)}
<h2>Portal (stateless, custom node)</h2>
<button
onClick={() =>
this.setState(prevState => ({
isPortalTwoActive: !prevState.isPortalTwoActive
}))
}
>
Toggle
</button>
{this.state.isPortalTwoActive && (
<Portal node={document && document.getElementById('user-node')}>
<p>This thing was portaled with custom node!</p>
</Portal>
)}
<h2>PortalWithState</h2>
<PortalWithState closeOnOutsideClick closeOnEsc>
{ifReact(
'< 16.2',
({ openPortal, closePortal, isOpen, portal }) => (
<div>
<button key="foo" onClick={openPortal}>
Open Portal {isOpen && '(this counts as an outside click)'}
</button>
{portal(
<p>
This is more advanced Portal. It handles its own state.{' '}
<button onClick={closePortal}>Close me!</button>, hit ESC or
click outside of me.
</p>
)}
</div>
),
({ openPortal, closePortal, isOpen, portal }) => (
<React.Fragment>
<button onClick={openPortal}>
Open Portal {isOpen && '(this counts as an outside click)'}
</button>
{portal(
<p>
This is more advanced Portal. It handles its own state.{' '}
<button onClick={closePortal}>Close me!</button>, hit ESC or
click outside of me.
</p>
)}
</React.Fragment>
)
)}
</PortalWithState>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));