Add support for html attributes.

venmo · Oct 25, 2015 · 434dcc0 · 434dcc0
1 parent ae95de9
commit 434dcc0
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -106,6 +106,7 @@ General Use Props:
 | `scripts` | array | A list of scripts in one of three forms: string paths `'mysite.com/script.js'`, script src objects `{ src: 'mysite.com/script.js' }` or inline scripts `{ inline: 'var x = 1;' }` | `[ ]`
 | `stylesheets` | array | A list of stylesheet in one of three forms: string paths `'mysite.com/styles.css'`, style href objects `{ href: 'mysite.com/styles.css' }` or inline styles `{ inline: 'body { color: '#333' }' }` | `[ ]`
 | `childrenContainerId`           | string | The id for the dom element that contains the children nodes. | `'app'`
+| `htmlAttributes` | object | [Attributes](https://facebook.github.io/react/docs/tags-and-attributes.html#supported-attributes) that you'd like to use on the html tag. | `{ }`
 
 Props for Universal Rendering:
 

diff --git a/src/HTMLDocument.jsx b/src/HTMLDocument.jsx
@@ -94,7 +94,7 @@ class HTMLDocument extends Component {
 
   render() {
     return (
-      <html>
+      <html {...this.props.htmlAttributes}>
         <head>
           <title>{this.props.title}</title>
           {this.renderMetatags()}
@@ -112,6 +112,7 @@ class HTMLDocument extends Component {
 HTMLDocument.propTypes = {
   childrenContainerId: PropTypes.string,
   children: PropTypes.node,
+  htmlAttributes: PropTypes.object,
   metatags: PropTypes.array,
   scripts: PropTypes.array,
   state: PropTypes.object,
@@ -122,6 +123,7 @@ HTMLDocument.propTypes = {
 
 HTMLDocument.defaultProps = {
   childrenContainerId: 'app',
+  htmlAttributes: {},
   metatags: [],
   scripts: [],
   state: null,

diff --git a/test/HTMLDocument.spec.js b/test/HTMLDocument.spec.js
@@ -27,6 +27,16 @@ describe('HTMLDocument', () => {
     expect(qs('title').html()).to.equal(props.title);
   });
 
+  it('should render html attributes', () => {
+    const props = {
+      htmlAttributes: {
+        lang: 'es'
+      }
+    };
+    const qs = renderAndGetQuerySelector(props);
+    expect(qs('html').attr('lang')).to.equal(props.htmlAttributes.lang);
+  });
+
   describe('Metatags', () => {
     it('should render metatags', () => {
       const props = {