https://github.com/means88/react-jsport

Load external JavaScript&CSS in React
https://github.com/means88/react-jsport

npm react

Last synced: about 10 hours 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 7 years ago)
• Default Branch: master
• Last Pushed: 2017-05-15T04:26:11.000Z (over 7 years ago)
• Last Synced: 2025-01-09T09:10:37.111Z (1 day 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 [![react-jsport](https://badge.fury.io/js/react-jsport.svg)](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