The Platform
Web API's turned into React Hooks and Suspense-friendly React components. #useThePlatform
Install
Note: React 16.8+ is required for Hooks.
With npm
npm i the-platform --save
Or with yarn
yarn add the-platform
Examples
API
Hooks
useDeviceMotion()
Detect and retrieve current device Motion.
Returns
Example
; const Example = { const acceleration rotationRate interval = ; // ...};
useDeviceOrientation()
Detect and retrieve current device orientation.
Returns
Example
; const Example = { const alpha beta gamma absolute = ; // ...};
useGeoPosition()
Retrieve Geo position from the browser. This will throw a promise (must use with Suspense).
Arguments
Returns
Example
; const Example = { const coords: latitude longitude = ; // ...};
useNetworkStatus()
Retrieve network status from the browser.
Returns
Object containing:
-
isOnline: boolean
:true
if the browser has network access.false
otherwise. -
offlineAt?: Date
: Date when network connection was lost.
Example
; const Example = { const isOnline offlineAt = ; // ...};
useMedia()
Arguments
query: string | object
: media query string or object (parsed by json2mq).
Returns
match: boolean
: true
if the media query matches, false
otherwise.
Example
; const Example = { const small = ; const medium = ; // ...};
useScript()
This will throw a promise (must use with Suspense).
Arguments
Object containing:
src: string
: The script's URI.
; const Example = { const _unused = ; // ...};
useStylesheet()
This will throw a promise (must use with Suspense).
Arguments
Object containing:
href: string
: The stylesheet's URI.media?: string
: Intended destination media for style information.
; const Example = { const _unused = ; // ...};
useWindowScrollPosition()
Returns
Object containing:
x: number
: Horizontal scroll in pixels (window.pageXOffset
).y: number
: Vertical scroll in pixels (window.pageYOffset
).
Example
; const Example = { const x y = ; // ...};
useWindowSize()
Returns
Object containing:
width
: Width of browser viewport (window.innerWidth
)height
: Height of browser viewport (window.innerHeight
)
Example
; const Example = { const width height = ; // ...};
Components
<Img>
Props
src: string
- anything else you can pass to an
<img>
tag
;; { return <div> <h1>Hello</h1> <ReactSuspense maxDuration=300 fallback='loading...'> <Img src="https://source.unsplash.com/random/4000x2000" /> </ReactSuspense> </div> ;} ;
<Script>
Props
src: string
children?: () => React.ReactNode
- This render prop will only execute after the script has loaded.- anything else you can pass to a
<script>
tag
;; { return <div> <h1>Load Stripejs Async</h1> <ReactSuspense maxDuration=300 fallback='loading...'> <Script src="https://js.stripe.com/v3/" async> console || null </Script> </ReactSuspense> </div> ;} ;
<Video>
Props
src: string
- anything else you can pass to a
<video>
tag
;; { return <div> <h1>Ken Wheeler on a Scooter</h1> <ReactSuspense maxDuration=300 fallback='loading...'> <Video src="https://video.twimg.com/ext_tw_video/1029780437437014016/pu/vid/360x640/QLNTqYaYtkx9AbeH.mp4?tag=5" preload="auto" autoPlay /> </ReactSuspense> </div> ;} ;
<Audio>
Props
src: string
- anything else you can pass to a
<audio>
tag
;; { return <div> <h1>Meavy Boy - Compassion</h1> /* source: http://freemusicarchive.org/music/Meavy_Boy/EP_71_to_20/Compassion */ <ReactSuspense maxDuration=300 fallback='loading...'> <Audio src="https://file-dnzavydoqu.now.sh/" preload="auto" autoPlay /> </ReactSuspense> </div> ;} ;
<Preload>
Preload a resource with <link rel="preload">
. For more information check out MDN or the Google Developer Blog.
Props
href: string
as: string
- resource type
;; { return <div> <h1>Preload</h1> <ReactSuspense maxDuration=300 fallback='loading...'> <Preload href="https://js.stripe.com/v3/" rel="preload" as="script" /> <Script src="https://js.stripe.com/v3/" async /> </ReactSuspense> </div> ;} ;
<Stylesheet>
Lazy load a stylesheet.
Props
href: string
;; { return <div> <h1>Styles</h1> <ReactSuspense maxDuration=300 fallback='loading...'> <Stylesheet href="style.css" /> </ReactSuspense> </div> ;} ;
Authors
Inspiration
- react-fns
- AOL.
MIT License