Skip to content

Update readme, add dl badge #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 4, 2018
Merged

Update readme, add dl badge #31

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 24 additions & 24 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,21 @@
# React Async Script Loader

[![Build Status][travis.img]][travis.url]
[![npm version][npm.img]][npm.url]
[![Dependencies][deps.img]][deps.url]
[![Dev Dependencies][devdeps.img]][devdeps.url]
[![Build Status][travis.img]][travis.url] [![npm version][npm.img]][npm.url] [![npm downloads][npm.dl.img]][npm.dl.url] [![Dependencies][deps.img]][deps.url]

A React composition mixin for loading 3rd party scripts asynchronously. This component allows you to wrap component
that needs 3rd party resources, like reCAPTCHA or Google Maps, and have them load the script asynchronously.

With React 0.13, mixins are getting deprecated in favor of composition.

After reading this article, [Mixins Are Dead. Long Live Composition][dan_abramov],
I decided push react-script-loader a bit further and make a composition function that wraps component.

## Version to use

- __React < 15.5__: v0.8.0
- __React >= 15.5__: >= v0.9.0

## Usage

The api is very simple `makeAsyncScriptLoader(Component, getScriptUrl, options)`. Where options can contain exposeFuncs, callbackName and globalName.

- Component: The component to wrap.
- getScriptUrl: a string or function that returns the full URL of the script tag.
- `Component`: The component to wrap.
- `getScriptUrl`: a string or function that returns the full URL of the script tag.
- options *(optional)*:
- exposeFuncs: Array of String. It'll create a function that will call the child component with the same name. It passes arguments and return value.
- callbackName: If the scripts calls a global function when loaded, provide the callback name here. It'll be autoregistered on the window.
- globalName: If wanted, provide the globalName of the loaded script. It'll be injected on the component with the same name *(ex: "grecaptcha")*
- removeOnUnmount: Boolean **default=false**: If set to true removes the script tag on the component unmount
- `exposeFuncs`: Array of Strings. It'll create a function that will call the child component with the same name. It passes arguments and return value.
- `callbackName`: If the scripts calls a global function when loaded, provide the callback name here. It'll be autoregistered on the window.
- `globalName`: If wanted, provide the globalName of the loaded script. It'll be injected on the component with the same name *(ex: "grecaptcha")*
- `removeOnUnmount`: Boolean **default=false**: If set to true removes the script tag on the component unmount

You can retrieve the child component using the function called `getComponent()`.

Expand All @@ -39,7 +26,6 @@ See https://github.com/dozoisch/react-google-recaptcha
```js

// recaptcha-wrapper.js
"use strict";
import React from "react";

import ReCAPTCHA from "./recaptcha";
Expand All @@ -54,8 +40,8 @@ export default makeAsyncScriptLoader(ReCAPTCHA, URL, {
globalName: globalName,
});


// main.js
"use strict";
import React from "react";
import ReCAPTCHAWrapper from "./recaptcha-wrapper.js"

Expand Down Expand Up @@ -104,6 +90,20 @@ let instance = ReactTestUtils.renderIntoDocument(
instance.callsACallback(function () { console.log("Called from child", this.constructor.displayName); });
```

## Notes

### History

With React 0.13, mixins are getting deprecated in favor of composition.

After reading this article, [Mixins Are Dead. Long Live Composition][dan_abramov],
I decided push react-script-loader a bit further and make a composition function that wraps component.

### Version to use

- __React < 15.5__: v0.8.0
- __React >= 15.5__: >= v0.9.0

---

*Inspired by [react-script-loader][sl]*
Expand All @@ -114,10 +114,10 @@ instance.callsACallback(function () { console.log("Called from child", this.cons
[travis.url]: https://travis-ci.org/dozoisch/react-async-script
[npm.img]: https://badge.fury.io/js/react-async-script.svg
[npm.url]: http://badge.fury.io/js/react-async-script
[npm.dl.img]: https://img.shields.io/npm/dm/react-async-script.svg
[npm.dl.url]: https://www.npmjs.com/package/react-async-script
[deps.img]: https://david-dm.org/dozoisch/react-async-script.svg
[deps.url]: https://david-dm.org/dozoisch/react-async-script
[devdeps.img]: https://david-dm.org/dozoisch/react-async-script/dev-status.svg
[devdeps.url]: https://david-dm.org/dozoisch/react-async-script#info=devDependencies

[dan_abramov]: https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750
[sl]: https://github.com/yariv/ReactScriptLoader
Expand Down