https://github.com/mmarkelov/react-external-script-loader
React component for loading external scripts
https://github.com/mmarkelov/react-external-script-loader
external loader react react-component
Last synced: about 2 months ago
JSON representation
React component for loading external scripts
- Host: GitHub
- URL: https://github.com/mmarkelov/react-external-script-loader
- Owner: mmarkelov
- License: mit
- Created: 2019-02-18T12:53:30.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-27T12:16:18.000Z (over 7 years ago)
- Last Synced: 2025-08-09T14:26:54.657Z (11 months ago)
- Topics: external, loader, react, react-component
- Language: JavaScript
- Homepage: https://mmarkelov.github.io/react-external-script-loader/
- Size: 341 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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';
...
```
## 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 (
React External Script Loader Example
this.setState({ load: true })}>
Load external script
{load && (
<>
VK.Widgets.Playlist(
'vk_playlist_-2000646569_646569',
-2000646569,
646569,
'ae82627d6c8bb4500d',
)
}
/>
>
)}
);
}
}
const rootElement = document.getElementById('root');
ReactDOM.render(, 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