diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..ad36157 --- /dev/null +++ b/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["es2015", "react", "stage-0"], + "plugins": ["add-module-exports"] +} diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..76ebb07 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,55 @@ +{ + "parser" : "babel-eslint", + "plugins": [ + "import" + ], + "extends" : ["airbnb"], + "rules": { + // Soften some rules. + "comma-dangle": 0, // Nobody cares about commas. + "default-case": 0, // Required default case is nonsense. + "new-cap": [2, {"capIsNew": false, "newIsCap": true}], // For Record() etc. + "no-floating-decimal": 0, // .5 is just fine. + "no-shadow": 0, // Shadowing is a nice language feature. + // eslint-plugin-import + "import/no-unresolved": [2, {"commonjs": true}], + "import/named": 2, + "import/default": 2, + "import/namespace": 2, + "import/export": 2, + // BB rules soften + "max-len": 0, + "curly": 0, // Do not mess up code with {} for one-line ifs. + "key-spacing": [2, {"beforeColon": false, "afterColon": true, "mode": "minimum"}], // Enable use of nice block object creation. + "no-use-before-define": 0, // Enable to define styles after using them in component. + "react/jsx-no-bind": 0, // Enable arrow functions in Props definitions. + "react/prefer-stateless-function": 0 // Enable functions with state. + }, + "globals": { + "after": false, + "afterEach": false, + "before": false, + "beforeEach": false, + "console": false, + "describe": false, + "it": false, + "module": false, + "process": false, + "require": false, + "window": false + }, + "settings": { + "import/ignore": [ + "node_modules", + "\\.json$" + ], + "import/parser": "babel-eslint", + "import/resolve": { + "extensions": [ + ".js", + ".jsx", + ".json" + ] + } + } +} diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..176a458 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +* text=auto diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5624fb3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +node_modules +*.log +.DS_Store +dist +lib diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..c21cda5 --- /dev/null +++ b/.npmignore @@ -0,0 +1,6 @@ +.DS_Store +*.log +src +test +examples +coverage diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..b7b339c --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 Blueberry Apps s.r.o. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..53c4680 --- /dev/null +++ b/README.md @@ -0,0 +1,60 @@ +#react-load-script +This package simplifies loading of 3rd party scripts in your React applications. + +#Motivation +There are situations when you need to use a 3rd party JS library in your React application (jQuery, D3.js for rendering charts, etc.) but you don't need it everywhere and/or you want to use it only in a response to users actions. In cases like this, preloading the whole library when application starts is an unnecessary and expensive operation which could possibly slow down your application. + +Using the `Script` component this package provides you with, you can easily load any 3rd party scripts your applications needs directly in a relevant component and show a placeholder while the script is loading (e.g. a loading animation). As soon as the script is fully loaded, a callback function you'll have passed to `Script` is called (see example below). + +#API +The package exports a single component with the following props: + +## `onCreate` +Called as soon as the script tag is created. + +## `onError` (required) +Called in case of an error with the script. + +## `onLoad` (required) +Called when the requested script is fully loaded. + +## `url` (required) +URL pointing to the script you want to load. + +#Example +You can use the following code to load jQuery in your app: + +```jsx +import Script from 'react-load-script' + +... + +render() { + return ( +