Web. Components. 😂
Web API's turned into React Hooks and Suspense-friendly React components. #useThePlatform
Note: React 16.8+ is required for Hooks.
npm i the-platform --save
yarn add the-platform
useDeviceMotion()
Detect and retrieve current device Motion.
DeviceMotionEvent
import { useDeviceMotion } from 'the-platform';const Example = () => { const { acceleration, rotationRate, interval } = useDeviceMotion();
// ... };
useDeviceOrientation()
Detect and retrieve current device orientation.
DeviceOrientationEvent
import { useDeviceOrientation } from 'the-platform';const Example = () => { const { alpha, beta, gamma, absolute } = useDeviceOrientation();
// ... };
useGeoPosition()
Retrieve Geo position from the browser. This will throw a promise (must use with Suspense).
PositionOptions
Position
import { useGeoPosition } from 'the-platform';const Example = () => { const { coords: { latitude, longitude }, } = useGeoPosition();
// ... };
useNetworkStatus()
Retrieve network status from the browser.
Object containing:
isOnline: boolean:
trueif the browser has network access.
falseotherwise.
offlineAt?: Date: Date when network connection was lost.
import { useNetworkStatus } from 'the-platform';const Example = () => { const { isOnline, offlineAt } = useNetworkStatus();
// ... };
useMedia()
query: string | object: media query string or object (parsed by json2mq).
defaultMatches: boolean: a boolean providing a default value for matches
match: boolean:
trueif the media query matches,
falseotherwise.
import { useMedia } from 'the-platform';const Example = () => { const small = useMedia('(min-width: 400px)'); const medium = useMedia({ minWidth: 800 });
// ... };
useScript()
This will throw a promise (must use with Suspense).
Object containing:
src: string: The script's URI.
import { useScript } from 'the-platform';const Example = () => { const _unused = useScript({ src: 'bundle.js' });
// ... };
useStylesheet()
This will throw a promise (must use with Suspense).
Object containing:
href: string: The stylesheet's URI.
media?: string: Intended destination media for style information.
import { useStylesheet } from 'the-platform';const Example = () => { const _unused = useStylesheet({ href: 'normalize.css' });
// ... };
useWindowScrollPosition()
Object containing:
x: number: Horizontal scroll in pixels (
window.pageXOffset).
y: number: Vertical scroll in pixels (
window.pageYOffset).
import { useWindowScrollPosition } from 'the-platform';const Example = () => { const { x, y } = useWindowScrollPosition();
// ... };
useWindowSize()
Object containing:
width: Width of browser viewport (
window.innerWidth)
height: Height of browser viewport (
window.innerHeight)
import { useWindowSize } from 'the-platform';const Example = () => { const { width, height } = useWindowSize();
// ... };
src: string
tag
import React from 'react'; import { Img } from 'the-platform';function App() { return (
); }Hello
<react.suspense maxduration="{300}" fallback="{'loading...'}"></react.suspense>
export default App;
src: string
children?: () => React.ReactNode- This render prop will only execute after the script has loaded.
import React from 'react'; import { Script } from 'the-platform';function App() { return (
); }Load Stripe.js Async
<react.suspense maxduration="{300}" fallback="{'loading...'}"> </react.suspense>export default App;
src: string
import React from 'react'; import { Video } from 'the-platform';function App() { return (
); }Ken Wheeler on a Scooter
<react.suspense maxduration="{300}" fallback="{'loading...'}"> </react.suspense>export default App;
src: string
import React from 'react'; import { Audio } from 'the-platform';function App() { return (
); }Meavy Boy - Compassion
{/* source: http://freemusicarchive.org/music/Meavy_Boy/EP_71_to_20/Compassion */} <react.suspense maxduration="{300}" fallback="{'loading...'}"> </react.suspense>export default App;
Preload a resource with
. For more information check out MDN or the Google Developer Blog.href: string
as: string- resource type
import React from 'react'; import { Preload, Script } from 'the-platform';function App() { return (
); }Preload
<react.suspense maxduration="{300}" fallback="{'loading...'}"> </react.suspense>export default App;
Lazy load a stylesheet.
href: string
import React from 'react'; import { Stylesheet } from 'the-platform';function App() { return (
); }Styles
<react.suspense maxduration="{300}" fallback="{'loading...'}"> </react.suspense>export default App;
MIT License