Preact Portal Example

by Jason Miller

HTML

<script src="https://npmcdn.com/preact"></script>
<script src="https://npmcdn.com/preact-portal"></script>

CSS

.thumb {
	width: 100px;
	border: 5px solid #444;
	overflow: hidden;
	cursor: pointer;
}

.popup {
	position: absolute;
	left: 25px;
	top: 25px;
	right: 25px;
	bottom: 25px;
	background: #666;
	box-shadow: 0 5px 50px #000;
	text-align: center;
	overflow: auto;
	cursor: pointer;
	animation: zoom .4s forwards ease 1;
}

@keyframes zoom {
	from { opacity:0; transform:translateY(100%) scale(0); }
}

img {
	display: block;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
}

Babel + JSX

const { h, Component, render } = preact;
const Portal = preactPortal;
/** @jsx h */

class Thumbnail extends Component {
	open = () => this.setState({ open:true });
	close = () => this.setState({ open:false });

	render({ url }, { open }) {
		return (
			<div class="thumb" onClick={this.open}>
				<img src={url} />

				{ open ? (
					<Portal into="body">
						<div class="popup" onClick={this.close}>
							<img src={url} />
						</div>
					</Portal>
				) : null }
			</div>
		);
	}
}

render(<Thumbnail url="https://i.imgur.com/6Rp4hbs.gif" />, document.body);