https://github.com/means88/react-jsport
Load external JavaScript&CSS in React
https://github.com/means88/react-jsport
npm react
Last synced: 9 months ago
JSON representation
Load external JavaScript&CSS in React
- Host: GitHub
- URL: https://github.com/means88/react-jsport
- Owner: Means88
- License: mit
- Created: 2017-04-24T07:43:41.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-05-15T04:26:11.000Z (over 8 years ago)
- Last Synced: 2025-02-23T01:58:03.775Z (9 months ago)
- Topics: npm, react
- Language: JavaScript
- Homepage: https://means88.github.io/react-jsport
- Size: 755 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React JSPort [](https://www.npmjs.com/package/react-jsport)
===
```
npm install react-jsport
```
DEMO
---
[https://means88.github.io/react-jsport/](https://means88.github.io/react-jsport/)
INTERFACE
---
```js
function load(requirements = [], options = {});
/**
* @param requirements: array of url[dfault=[]]
* @param options object[default={}]: {
* force: boolean[default=false], requirements with the same url will not be loaded twice by default
* loadingElement: ReactElement[default=null], be rendered while loading
* errorElement: ReactElement[default=null], be rendered when an error caused
* }
* @return ReactComponent
*/
JSPort.propTypes = {
// requirements, can be url or list of url
require: PropTypes.oneOfType([
PropTypes.string,
PropTypes.arrayOf(PropTypes.string),
]),
// load requirements even if it has been loaded
force: PropTypes.bool,
children: PropTypes.oneOfType([
PropTypes.element,
PropTypes.arrayOf(PropTypes.element)
]),
loadingElement: PropTypes.element,
errorElement: PropTypes.element,
};
JSPort.defaultProps = {
require: [],
force: false,
children: null,
loadingElement: null,
errorElement: null,
};
load(requirements, options)(Component);
// ==>
```
USAGE
---
```js
import { load } from 'react-jsport';
Component = load("https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js")(Component);
// or
@load("https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js")
class Component extends React.Component {
// ...
}
```
Or wrapped in `JSPort`
```js
class Component extends React.Component {
componentDidMount() {
this.changeText();
}
componentDidUpdate() {
this.changeText();
}
changeText() {
$('#hello').text('Changed by jQuery');
}
render() {
return (
Hello world
);
}
}
// import jQuery dynamically
import JSPort from 'react-jsport';
```
TODO
---
- cache