the-platform

by jaredpalmer

jaredpalmer /the-platform

Web. Components. πŸ˜‚

4.2K Stars 103 Forks Last release: over 1 year ago (v0.10.1) MIT License 168 Commits 11 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Repo Banner

The Platform

Blazing Fast

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

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
: media query string or object (parsed by json2mq).

Returns

match: boolean
:
true
if the media query matches,
false
otherwise.

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

. For more information check out MDN or the Google Developer Blog.

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

Inspiration


MIT License

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.