npmpackage.info

react-async-script-hoc

a hoc for async globals

0.7.0

MIT

JavaScript

1.31 kB

3,614 1.7

Installations

npm install react-async-script-hoc

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

8.9.4

NPM Version

6.1.0 Pull Requests

Open

0

Total

1

Closed

1

Issues

Open

1

Total

1

Closed

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View all 1 contributors

Languages

JavaScript

JavaScript (100%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

mattkrick

Download Statistics

Total Downloads

3,614

Last Day

Last Week

Last Month

Last Year

147

GitHub Statistics

6 Stars

19 Commits

3 Forks

2 Watching

1 Branches

1 Contributors

Bundle Size

2.86 kB

Minified

1.31 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

0.7.0

Package Id

react-async-script-hoc@0.7.0

Unpacked Size

135.09 kB

Size

36.87 kB

File Count

NPM Version

6.1.0

Node Version

8.9.4

Total Downloads

Cumulative downloads

Total Downloads

3,614

Last day

Compared to previous day

Last week

-37.5%

Compared to previous week

Last month

Compared to previous month

Last year

-20.5%

147

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

ava babel-cli babel-preset-es2015 babel-preset-react babel-preset-stage-0 babel-register coveralls nyc react react-dom rimraf

Versions

react-async-hoc

Load 3rd party scripts and styles from a url in a higher order component

Installation

yarn add react-async-script-hoc

What's it do

This is a simple little higher-order component (HOC) for loading scripts from a url and giving it to you in props instead of window. Some 3rd party vendors don't make npm packages for their scripts & you must load them from a url. This really sucks, but it's usually to comply with regulations (Stripe.js, ReCaptcha, etc.) For example, with Stripe, instead of adding a script tag, you can use this & then get window.Stripe as a prop. For styles, this might be useful if you're using a 3rd party package that comes with CSS but you prefer CSS-in-JS. You can also return a method (or a promisified method) instead of the whole global object. Yay modularity & lazy loading!

##Usage

Stick it around your component that needs to load the url

Example:

1import withAsync from 'react-async-hoc';
2const statelessComponent = (props) => {
3  const {stripe} = props;
4  // undefined if the script hasn't loaded yet
5  if (!stripe) {
6    return <Loading/>
7  }
8
9  onEventHandler = () => {
10    stripe.stealMoney();
11}
12  return <div onClick={onEventHandler}>I can haz?</div>
13}
14
15const stripeCb = () => {
16  const stripe = window.Stripe;
17  stripe.setPublishableKey(stripeKey);
18  return {
19    stripe,
20    // example of returning a promisified method when the API doesn't follow a node standard callback
21    createToken: (fields) => new Promise((resolve) => {
22      stripe.card.createToken(fields, (status, response) => {
23        resolve(response);
24      })
25    })
26  };
27};
28
29return withAsync({'https://js.stripe.com/v2/': stripeCb});

##API

withAsync(fetchScripts, fetchStyles)

fetchScripts: An object containing all the scripts you want to fetch. If you don't know this until runtime, have the parent component pass in a fetchScripts property. Pass in as many scripts as you want to load.
- key: the url of the script to fetch
- value: the callback to run one that script has been loaded
fetchStyles: Identical to fetchScripts, but for loading CSS.

License

MIT

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Maintained

Determines if the project is "actively maintained".

0

SAST

Determines if the project uses static code analysis.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

70 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-hr2v-3952-633q
Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6
Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq
Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm
Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-4hpf-3wq7-5rpr
Warn: Project is vulnerable to: GHSA-f522-ffg8-j8r6
Warn: Project is vulnerable to: GHSA-p9w8-2mpq-49h9
Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-282f-qqgm-c34q
Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-w9mr-4mfr-499f
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3
Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7
Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-g7q5-pjjr-gqvp
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-xc7v-wxcw-j472
Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp

Score

1.7

/10

Last Scanned on 2025-01-27

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-async-script-hoc

react-async-load-script

1.0.7

Async script loader HOC for React