Common hooks used in React
npm install @ouroboros/react-hooksKeeps 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.
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>
)
}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>
);
}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>
);
}