React component for loading external scripts

Initial release

mapkeji

react-external-script-loader

# react-external-script-loader

Library for loading external scripts

## Install

```shell
npm install react-external-script-loader
yarn add react-external-script-loader
```

## Usage

```js
import Loader from 'react-external-script-loader';

...

<Loader url="https://vk.com/js/api/openapi.js?160" global="VK" />

```

## Component

### Options

| Property              | Type   | Description                             |
| -------------         |:-----: | :-----                                  |
| **url**(required)     | string | Url of external script                  |
| **global**(required)  | string | name of object if it loads successfully |
| **options**           | object | Script options - possible keys: {type, charset, async, defer}. You can ckeck it [here](https://www.w3schools.com/tags/tag_script.asp)  |
| **onLoad**            | function | Called when script loaded ```(global: object): void```                |
| **onError**           | function | Called when script loading was failed ```void```                |

## Basic example

```js
import Loader from 'react-external-script-loader';

class App extends React.Component {
  state = {
    load: false,
  };

  render() {
    const { load } = this.state;

    return (
      <div className="App">
        <h1>React External Script Loader Example</h1>
        <button onClick={() => this.setState({ load: true })}>
          Load external script
        </button>

        {load && (
          <>
            <div id="vk_playlist_-2000646569_646569" />
            <Loader
              url="https://vk.com/js/api/openapi.js?160"
              global="VK"
              onLoad={VK =>
                VK.Widgets.Playlist(
                  'vk_playlist_-2000646569_646569',
                  -2000646569,
                  646569,
                  'ae82627d6c8bb4500d',
                )
              }
            />
          </>
        )}
      </div>
    );
  }
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
```

You can clone this repository and check example

```shell
git clone https://github.com/mmarkelov/react-external-script-loader.git
cd ./react-external-script-loader/example
yarn && yarn run dev
```

## TODO

- [ ] Add tests
- [ ] Write clearer description
- [ ] Write more examples


react-external-script-loader

Initial release

react-external-script-loader

Install

Usage

Component

Options

Basic example

TODO

Keywords

FAQs

What is react-external-script-loader?

Is react-external-script-loader popular?

Is react-external-script-loader well maintained?

Property	Type	Description
url(required)	string	Url of external script
global(required)	string	name of object if it loads successfully
options	object	Script options - possible keys: {type, charset, async, defer}. You can ckeck it here
onLoad	function	Called when script loaded `(global: object): void`
onError	function	Called when script loading was failed `void`

react-external-script-loader

.css-1z04cui{margin-bottom:var(--chakra-space-4);font-size:var(--chakra-fontSizes-md);}Initial release

react-external-script-loader

Install

Usage

Component

Options

Basic example

TODO

Keywords

FAQs

What is react-external-script-loader?

Is react-external-script-loader popular?

Is react-external-script-loader well maintained?

Initial release