Merge pull request #10 from julesterrien/feature-custom-attr

Set custom attributes + add test.

Author: jakubkottnauer

README.md

@@ -24,6 +24,9 @@ Called when the requested script is fully loaded.
 ### `url` (required)
 URL pointing to the script you want to load.
 
+### `attributes`
+An object used to define custom attributes to be set on the script element. For example, `attributes={{ id: 'someId', 'data-custom: 'value' }}` will result in `<script id="someId" data-custom="value" />`
+
 ## Example
 You can use the following code to load jQuery in your app:
 

src/index.jsx

@@ -8,12 +8,14 @@ export default class Script extends React.Component {
     onError: RPT.func.isRequired,
     onLoad: RPT.func.isRequired,
     url: RPT.string.isRequired,
+    attributes: RPT.object,
   };
 
   static defaultProps = {
     onCreate: () => {},
     onError: () => {},
     onLoad: () => {},
+    attributes: {},
   }
 
   // A dictionary mapping script URLs to a dictionary mapping
@@ -76,11 +78,16 @@ export default class Script extends React.Component {
   }
 
   createScript() {
-    const { onCreate, url } = this.props;
+    const { onCreate, url, attributes } = this.props;
     const script = document.createElement('script');
 
     onCreate();
 
+    // add 'data-' or non standard attributes to the script tag
+    if (attributes) {
+      Object.keys(attributes).forEach(prop => script.setAttribute(prop, attributes[prop]));
+    }
+
     script.src = url;
     script.async = 1;
 

src/index.test.jsx

@@ -1,3 +1,5 @@
+/* global document */
+
 import React from 'react';
 import { shallow } from 'enzyme';
 import Script from './index';
@@ -11,6 +13,11 @@ beforeEach(() => {
     onError: jest.fn(),
     onLoad: jest.fn(),
     url: 'dummy',
+    attributes: {
+      id: 'dummyId',
+      dummy: 'non standard',
+      'data-dummy': 'standard',
+    },
   };
   wrapper = shallow(<Script {...props} />);
 });
@@ -75,3 +82,10 @@ test('componentWillUnmount should delete observers for the loader', () => {
   wrapper.instance().componentWillUnmount();
   expect(getObserver()).toBe(undefined);
 });
+
+test('custom attributes should be set on the script tag', () => {
+  const script = document.getElementById('dummyId');
+  expect(script.getAttribute('id')).toBe('dummyId');
+  expect(script.getAttribute('dummy')).toBe('non standard');
+  expect(script.getAttribute('data-dummy')).toBe('standard');
+});