Have ideas to improve npm?Join in the discussion! »

    @shopify/react-import-remote
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.10 • Public • Published

    @shopify/react-import-remote

    Build Status Build Status License: MIT npm version npm bundle size (minified + gzip)

    Asynchronous script loading for React.

    Installation

    $ yarn add @shopify/react-import-remote

    Usage

    The package provides a hook and component that are intended for loading external scripts. These utilities cache results by source, so only a single script tag is ever added for a particular source.

    useImportRemote()

    import React from 'react';
    import {useImportRemote, Status} from '@shopify/react-import-remote';
    import {DeferTiming} from '@shopify/async';
    
    function MyComponent() {
      const {result} = useImportRemote(
        'https://some-external-service.com/global.js',
      );
    
      if (result.status === Status.Failed) {
        // do something with error result
      }
    
      if (result.status === Status.Complete) {
        // do something with successful result
      }
    
      return null;
    }

    import React from 'react';
    import ImportRemote from '@shopify/react-import-remote';
    import {DeferTiming} from '@shopify/async';
    
    interface RemoteGlobal {}
    interface WindowWithGlobal extends Window {
      remoteGlobal: RemoteGlobal;
    }
    
    function MyComponent() {
      return (
        <ImportRemote
          preconnect
          source="https://some-external-service.com/global.js"
          getImport={}
          onImported={(result: RemoteGlobal | Error) => {
            if (result instanceof Error) {
              // do something with error result
            }
    
            // do something with successful result
          }}
          defer={DeferTiming.Mount}
        />
      );
    }

    source

    Source of the script to load the global from

    preconnect

    Generates a preconnect link tag for the source’s domain using <Preconnect /> component from @shopify/react-html

    getImport

    Callback that takes in window with the added global and returns the global added to the window by the new script

    onImported

    Callback that gets called with the imported global or an error if one occurs

    defer

    A member of the DeferTiming enum (from @shopify/async) allowing the import request to wait until:

    • Component mount (DeferTiming.Mount; this is the default)
    • Browser idle (DeferTiming.Idle; if window.requestIdleCallback is not available, it will load on mount), or
    • Component is in the viewport (DeferTiming.InViewport; if IntersectionObserver is not available, it will load on mount)

    Note, changing any of these values while rendering will cancel the import.

    Keywords

    none

    Install

    npm i @shopify/react-import-remote

    DownloadsWeekly Downloads

    45,043

    Version

    1.2.10

    License

    MIT

    Unpacked Size

    48.1 kB

    Total Files

    35

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar