@shopify/react-import-remote
Asynchronous script loading for React
Last updated 17 days ago by shopify-dep .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @shopify/react-import-remote 
SYNC missed versions from official npm registry.

@shopify/react-import-remote

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;
}

<ImportRemote />

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.

Current Tags

  • 1.0.25                                ...           latest (17 days ago)

60 Versions

  • 1.0.25                                ...           17 days ago
  • 1.0.24                                ...           23 days ago
  • 1.0.23                                ...           a month ago
  • 1.0.22                                ...           a month ago
  • 1.0.21                                ...           a month ago
  • 1.0.20                                ...           a month ago
  • 1.0.19                                ...           2 months ago
  • 1.0.18                                ...           2 months ago
  • 1.0.17                                ...           3 months ago
  • 1.0.16                                ...           3 months ago
  • 1.0.15                                ...           3 months ago
  • 1.0.14                                ...           3 months ago
  • 1.0.13                                ...           3 months ago
  • 1.0.12                                ...           4 months ago
  • 1.0.11                                ...           4 months ago
  • 1.0.10                                ...           5 months ago
  • 1.0.8                                ...           5 months ago
  • 1.0.7                                ...           5 months ago
  • 1.0.6                                ...           5 months ago
  • 1.0.5                                ...           5 months ago
  • 1.0.3                                ...           6 months ago
  • 1.0.2                                ...           6 months ago
  • 1.0.1                                ...           7 months ago
  • 1.0.0                                ...           7 months ago
  • 0.7.0                                ...           7 months ago
  • 0.6.14                                ...           7 months ago
  • 0.6.13                                ...           7 months ago
  • 0.6.12                                ...           7 months ago
  • 0.6.11                                ...           7 months ago
  • 0.6.10                                ...           8 months ago
  • 0.6.9                                ...           8 months ago
  • 0.6.8                                ...           8 months ago
  • 0.6.7                                ...           8 months ago
  • 0.6.6                                ...           8 months ago
  • 0.6.5                                ...           8 months ago
  • 0.6.4                                ...           8 months ago
  • 0.6.3                                ...           8 months ago
  • 0.6.2                                ...           8 months ago
  • 0.6.1                                ...           8 months ago
  • 0.6.0                                ...           8 months ago
  • 0.5.3                                ...           8 months ago
  • 0.5.2                                ...           8 months ago
  • 0.5.1                                ...           8 months ago
  • 0.5.0                                ...           8 months ago
  • 0.4.7                                ...           9 months ago
  • 0.4.6                                ...           9 months ago
  • 0.4.4                                ...           9 months ago
  • 0.4.3                                ...           9 months ago
  • 0.4.2                                ...           10 months ago
  • 0.4.1                                ...           10 months ago
  • 0.4.0                                ...           10 months ago
  • 0.3.0                                ...           10 months ago
  • 0.2.0                                ...           10 months ago
  • 0.1.7                                ...           a year ago
  • 0.1.6                                ...           a year ago
  • 0.1.4                                ...           a year ago
  • 0.1.3                                ...           a year ago
  • 0.1.2                                ...           a year ago
  • 0.1.1                                ...           a year ago
  • 0.1.0                                ...           a year ago

Copyright 2014 - 2016 © taobao.org |