the-platform
    TypeScript icon, indicating that this package has built-in type declarations

    0.10.1 • Public • Published

    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

    <Img>

    Props

    • src: string
    • anything else you can pass to an <img> tag
    import React from 'react';
    import { Img } from 'the-platform';
     
    function App() {
      return (
        <div>
          <h1>Hello</h1>
          <React.Suspense maxDuration={300} fallback={'loading...'}>
            <Img src="https://source.unsplash.com/random/4000x2000" />
          </React.Suspense>
        </div>
      );
    }
     
    export default App;

    <Script>

    Props

    • src: string
    • children?: () => React.ReactNode - This render prop will only execute after the script has loaded.
    • anything else you can pass to a <script> tag
    import React from 'react';
    import { Script } from 'the-platform';
     
    function App() {
      return (
        <div>
          <h1>Load Stripe.js Async</h1>
          <React.Suspense maxDuration={300} fallback={'loading...'}>
            <Script src="https://js.stripe.com/v3/" async>
              {() => console.log(window.Stripe) || null}
            </Script>
          </React.Suspense>
        </div>
      );
    }
     
    export default App;

    <Video>

    Props

    • src: string
    • anything else you can pass to a <video> tag
    import React from 'react';
    import { Video } from 'the-platform';
     
    function App() {
      return (
        <div>
          <h1>Ken Wheeler on a Scooter</h1>
          <React.Suspense maxDuration={300} fallback={'loading...'}>
            <Video
              src="https://video.twimg.com/ext_tw_video/1029780437437014016/pu/vid/360x640/QLNTqYaYtkx9AbeH.mp4?tag=5"
              preload="auto"
              autoPlay
            />
          </React.Suspense>
        </div>
      );
    }
     
    export default App;

    <Audio>

    Props

    • src: string
    • anything else you can pass to a <audio> tag
    import React from 'react';
    import { Audio } from 'the-platform';
     
    function App() {
      return (
        <div>
          <h1>Meavy Boy - Compassion</h1>
          {/* source: http://freemusicarchive.org/music/Meavy_Boy/EP_71_to_20/Compassion */}
          <React.Suspense maxDuration={300} fallback={'loading...'}>
            <Audio src="https://file-dnzavydoqu.now.sh/" preload="auto" autoPlay />
          </React.Suspense>
        </div>
      );
    }
     
    export default App;

    <Preload>

    Preload a resource with <link rel="preload">. 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 (
        <div>
          <h1>Preload</h1>
          <React.Suspense maxDuration={300} fallback={'loading...'}>
            <Preload href="https://js.stripe.com/v3/" rel="preload" as="script" />
            <Script src="https://js.stripe.com/v3/" async />
          </React.Suspense>
        </div>
      );
    }
     
    export default App;

    <Stylesheet>

    Lazy load a stylesheet.

    Props

    • href: string
    import React from 'react';
    import { Stylesheet } from 'the-platform';
     
    function App() {
      return (
        <div>
          <h1>Styles</h1>
          <React.Suspense maxDuration={300} fallback={'loading...'}>
            <Stylesheet href="style.css" />
          </React.Suspense>
        </div>
      );
    }
     
    export default App;

    Authors

    Inspiration


    MIT License

    Install

    npm i the-platform

    DownloadsWeekly Downloads

    1,748

    Version

    0.10.1

    License

    MIT

    Unpacked Size

    82.6 kB

    Total Files

    41

    Last publish

    Collaborators

    • jaredpalmer