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

• Basics
• Low Quality Image Placeholder
• Using
  and Stripe Checkout

API

• Hooks

  • useDeviceMotion()

  • useDeviceOrientation()

  • useGeoPosition()

  • useNetworkStatus()

  • useMedia()

  • useScript()

  • useStylesheet()

  • useWindowScrollPosition()

  • useWindowSize()

• Components

• Authors
• Inspiration

Hooks

useDeviceMotion()

Detect and retrieve current device Motion.

Returns

DeviceMotionEvent

Example

import { useDeviceMotion } from 'the-platform';

const Example = () => {
  const { acceleration, rotationRate, interval } = useDeviceMotion();
  // ...
};

useDeviceOrientation()

Detect and retrieve current device orientation.

Returns

DeviceOrientationEvent

Example

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).

Arguments

PositionOptions

Returns

Position

Example

import { useGeoPosition } from 'the-platform';

const Example = () => {
  const {
    coords: { latitude, longitude },
  } = useGeoPosition();
  // ...
};

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

import { useNetworkStatus } from 'the-platform';

const Example = () => {
  const { isOnline, offlineAt } = useNetworkStatus();
  // ...
};

useMedia()

Arguments

query: string | object

defaultMatches: boolean

Returns

match: boolean

true

false

Example

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).

Arguments

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).

Arguments

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()

Returns

Object containing:

• x: number

  : Horizontal scroll in pixels (

  window.pageXOffset

  ).

• y: number

  : Vertical scroll in pixels (

  window.pageYOffset

  ).

Example

import { useWindowScrollPosition } from 'the-platform';

const Example = () => {
  const { x, y } = useWindowScrollPosition();
  // ...
};

useWindowSize()

Returns

Object containing:

• width

  : Width of browser viewport (

  window.innerWidth

  )

• height

  : Height of browser viewport (

  window.innerHeight

  )

Example

import { useWindowSize } from 'the-platform';

const Example = () => {
  const { width, height } = useWindowSize();
  // ...
};

Components

Props

• src: string

• anything else you can pass to an
  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;

Props

• src: string

• children?: () => React.ReactNode

  - This render prop will only execute after the script has loaded.
• anything else you can pass to a
  tag

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;

Props

• src: string

• anything else you can pass to a
  tag

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;

Props

• src: string

• anything else you can pass to a
  tag

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

Props

• 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.

Props

• 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;

Authors

• Jared Palmer
• Jack Cross
• Nathan Force

Inspiration

• react-fns
• AOL.

MIT License