Need help with the-platform?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jaredpalmer
4.3K Stars 105 Forks MIT License 174 Commits 33 Opened issues

Description

Web. Components. 😂

Services available

!
?

Need anything else?

Contributors list

# 345
React
TypeScr...
yarn
react-h...
83 commits
# 25,342
react-s...
Shell
Firebas...
GraphQL
13 commits
# 39,391
TypeScr...
React
React N...
Webpack
9 commits
# 63,893
React
nextjs
bundler
executa...
6 commits
# 728
Markdow...
vercel
node
open-gr...
3 commits
# 206,014
React
CSS
react-s...
reactjs
2 commits
# 66,835
React
CSS
HTML
react-s...
2 commits
# 10,552
TypeScr...
mocking...
react-s...
error-m...
2 commits
# 2,473
assembl...
spotify
gc
Rust
1 commit
# 136,656
React
HTML
react-s...
ESLint
1 commit
# 5,332
Node.js
oauth2
React
html5
1 commit
# 66,743
react-h...
reactjs
nextjs
Sass
1 commit
# 606
JavaScr...
Shell
Elixir
React
1 commit
# 85,154
materia...
Koa
Postgre...
ng-admi...
1 commit
# 53,326
TypeScr...
React N...
HTML
reactjs
1 commit
# 192,023
React
react-h...
react-s...
Shell
1 commit
# 170,307
React
CSS
HTML
react-s...
1 commit
# 29,316
React N...
gatsby
TypeScr...
Firebas...
1 commit
# 190,842
HTML
React
react-s...
atom-pa...
1 commit

Repo Banner

The Platform

Blazing Fast Discord Discord

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).
defaultMatches: boolean
: a boolean providing a default value for matches

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.