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 102 Forks MIT License 174 Commits 21 Opened issues

Description

Web. Components. 😂

Services available

!
?

Need anything else?

Contributors list

# 326
React
TypeScr...
yarn
react-h...
83 commits
# 23,277
react-s...
Shell
Firebas...
GraphQL
13 commits
# 36,553
TypeScr...
React
React N...
Webpack
9 commits
# 61,737
React
nextjs
executa...
Node.js
6 commits
# 1,170
Markdow...
vercel
node
open-gr...
3 commits
# 198,363
React
TypeScr...
react-s...
reactjs
2 commits
# 63,463
React
TypeScr...
HTML
react-s...
2 commits
# 11,549
TypeScr...
mocking...
react-s...
sentry
2 commits
# 580
JavaScr...
Shell
HTML
Jupyter...
1 commit
# 67,235
TypeScr...
react-h...
reactjs
nextjs
1 commit
# 52,675
TypeScr...
React N...
HTML
reactjs
1 commit
# 81,335
React
React N...
fetch
TypeScr...
1 commit
# 187,382
React
react-h...
react-s...
Shell
1 commit
# 80,743
TypeScr...
api-pla...
materia...
Koa
1 commit
# 185,161
HTML
React
TypeScr...
react-s...
1 commit
# 28,642
gatsby
nextjs
TypeScr...
Firebas...
1 commit
# 5,714
Node.js
oauth2
React
html5
1 commit
# 165,588
React
TypeScr...
HTML
react-s...
1 commit
# 2,818
unixpor...
Flutter
assembl...
spotify
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.