Preact Offline Demo

by Luke Edwards

HTML

<script src="https://unpkg.com/preact@8.2.6/dist/preact.min.js"></script>
<script src="https://unpkg.com/is-offline@2.1.0/dist/is-offline.min.js"></script>

CSS

.demo-offline {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	height: 48px;
	color: #FAFAFA;
	background: #212121;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	display: flex;
	transform: translateY(100%);
	animation: slideup 300ms 300ms forwards;
}

@keyframes slideup {
  from {
		transform: translateY(100%);
  }

  to {
  	transform: translateY(0%);
  }
}

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  font-weight: 300;
}

.demo {
	position: relative;
	overflow: hidden;
	width: 240px;
	height: 540px;
	margin: 30px auto;
	border: 4px solid black;
	border-radius: 30px;
	padding: 40px 30px;
}

.demo h2, .demo p {
	margin-bottom: 1em;
}

Babel + JSX

const { h, Component, render } = preact; /** @jsx h */
const isOffline = window['is-offline'];


class Offline extends Component {
  update = offline => this.setState({ offline });
	
	componentDidMount() {
	  isOffline.check().then(this.update);
		this.unwatch = isOffline.watch(this.update);
	}
	
	componentWillUnmount() {
		this.unwatch();
	}
	
	render(props, state) {
	  return state.offline && h('div', Object.assign({}, props), props.children || 'No connection');
	}
}

function Demo() {
  return (
		<div class="demo">
			<h2>DEMO</h2>
			<p>Hi there!</p>
			<p>This <em>isn't</em> the demo... yet!</p>
			<p>You need to manually enable <b>Offline mode</b> in order to see the Offline message in action.</p>
			
			<p>...By the way, these are custom styles & are not included in the module.</p>

			<Offline class="demo-offline">
				Custom Offline Text
			</Offline>
		</div>
	)
}

render(<Demo />, document.body);