The-Platform--Web.-Components

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<span class="token operator">-</span>platform <span class="token operator">--</span>save
JavaScript

Or with yarn

yarn add the<span class="token operator">-</span>platform
JavaScript

Examples

API

Hooks

useDeviceMotion()

Detect and retrieve current device Motion.

Returns

DeviceMotionEvent

Example

<span class="token keyword">import</span> <span class="token punctuation">{</span> useDeviceMotion <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'the-platform'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> Example <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> acceleration<span class="token punctuation">,</span> rotationRate<span class="token punctuation">,</span> interval <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useDeviceMotion</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
JavaScript

useDeviceOrientation()

Detect and retrieve current device orientation.

Returns

DeviceOrientationEvent

Example

<span class="token keyword">import</span> <span class="token punctuation">{</span> useDeviceOrientation <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'the-platform'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> Example <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> alpha<span class="token punctuation">,</span> beta<span class="token punctuation">,</span> gamma<span class="token punctuation">,</span> absolute <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useDeviceOrientation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
JavaScript

useGeoPosition()

Retrieve Geo position from the browser. This will throw a promise (must use with Suspense).

Arguments

PositionOptions

Returns

Position

Example

<span class="token keyword">import</span> <span class="token punctuation">{</span> useGeoPosition <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'the-platform'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> Example <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span>
    coords<span class="token punctuation">:</span> <span class="token punctuation">{</span> latitude<span class="token punctuation">,</span> longitude <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useGeoPosition</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
JavaScript

useNetworkStatus()

Retrieve network status from the browser.

Returns

Object containing:

  • isOnline: booleantrue if the browser has network access. false otherwise.
  • offlineAt?: Date: Date when network connection was lost.

Example

<span class="token keyword">import</span> <span class="token punctuation">{</span> useNetworkStatus <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'the-platform'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> Example <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> isOnline<span class="token punctuation">,</span> offlineAt <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useNetworkStatus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
JavaScript

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.