@ouroboros/react-hooks

Common hooks used in React

Installation

npm install @ouroboros/react-hooks

online

Keeps track of whether the client is connected to the internet or not. Uses the standard @ouroboros/subscribe interface of .set() / .get(), .subscribe() / .unsubscribe() and returns a simple true for online, and false for offline.

useOnline

A React hook that uses online internally to return a boolean

import { useOnline } from '@ouroboros/react-hooks/online';

function App() {
	const online = useOnline();

	return (
		<p>Browser is currently {online ? 'online' : 'offline'}</p>
	)
}

useSize

A react hook that uses size from @ouroboros/browser internally to return the current width of the screen in terms of:

value	name	range
'xs'	extra small	0 - 599
'sm'	small	600 - 899
'md'	medium	900 - 1199
'lg'	large	1200 - 1535
'xl'	extra large	1536 - ∞

import { greaterThan } from '@ouroboros/browser/size';
import { useSize } from '@ouroboros/react-hooks';

function App() {

	const size = useSize();

	return (
		<div>
			<p>Current size is {size}</p>
			{greaterThan(size, 'sm') ? (
				<div id="desktop" />
			) : (
				<div id="mobile_tablet" />
			)}
		</div>
	);
}

useWidth

A react hook that always returns the current width of the client in pixels and updates when the browser is resized.

import { useWidth } from '@ouroboros/react-hooks';

function App() {

	const width = useWidth();

	return (
		<p>The current width of the screen is {width}px.</p>
	);
}