react-document-meta - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

dist/index.js

@@ -25,3 +25,3 @@ 'use strict';
 
-var _clone$defaults$forEach$isValidProp = require('./utils');
+var _clone$defaults$forEach = require('./utils');
 
@@ -36,14 +36,14 @@ var _meta = {};
   for (var i = propsList.length - 1; extend && i >= 0; i--) {
-    var _props = _clone$defaults$forEach$isValidProp.clone(propsList[i]);
+    var _props = _clone$defaults$forEach.clone(propsList[i]);
 
     if (_props.description) {
-      _clone$defaults$forEach$isValidProp.defaults(_props, { meta: { name: { description: _props.description } } });
+      _clone$defaults$forEach.defaults(_props, { meta: { name: { description: _props.description } } });
     }
     if (_props.canonical) {
-      _clone$defaults$forEach$isValidProp.defaults(_props, { link: { rel: { canonical: _props.canonical } } });
+      _clone$defaults$forEach.defaults(_props, { link: { rel: { canonical: _props.canonical } } });
     }
 
-    _clone$defaults$forEach$isValidProp.defaults(props, _props);
+    _clone$defaults$forEach.defaults(props, _props);
     extend = _props.hasOwnProperty('extend');
-  };
+  }
 
@@ -81,5 +81,5 @@ if (props.auto) {
     }
-    // if ( p.canonical && !group['og:url'] ) {
-    //   group['og:url'] = p.canonical;
-    // }
+    if (p.canonical && !group['og:url']) {
+      group['og:url'] = p.canonical;
+    }
   }
@@ -123,11 +123,5 @@ return p;
 function removeDocumentMeta() {
-  _clone$defaults$forEach$isValidProp.forEach(document.querySelectorAll('head [data-rdm]'), removeNode);
+  _clone$defaults$forEach.forEach(document.querySelectorAll('head [data-rdm]'), removeNode);
 }
 
-function insertDocumentMeta(props) {
-  removeDocumentMeta();
-
-  _clone$defaults$forEach$isValidProp.forEach(getTags(props), insertDocumentMetaNode);
-}
-
 function insertDocumentMetaNode(entry) {
@@ -148,2 +142,8 @@ var tagName = entry.tagName;
 
+function insertDocumentMeta(props) {
+  removeDocumentMeta();
+
+  _clone$defaults$forEach.forEach(getTags(props), insertDocumentMetaNode);
+}
+
 function render(meta, opts) {
@@ -222,3 +222,3 @@ if (typeof opts !== 'object') {
     rewind: function rewind(opts) {
-      var meta = _clone$defaults$forEach$isValidProp.clone(_meta);
+      var meta = _clone$defaults$forEach.clone(_meta);
       this.dispose();
@@ -225,0 +225,0 @@ return render(meta, opts);

dist/utils.js

@@ -13,3 +13,2 @@ 'use strict';
 exports.forEach = forEach;
-exports.isValidProp = isValidProp;
 exports.removeDocumentMeta = removeDocumentMeta;
@@ -41,7 +40,7 @@
 
-var VALID_PROPS = ['title', 'description', 'canonical', 'meta', 'link'];
+// const VALID_PROPS = ['title', 'description', 'canonical', 'meta', 'link'];
 
-function isValidProp(propKey) {
-  return ~VALID_PROPS.indexOf(propKey);
-}
+// export function isValidProp ( propKey ) {
+//   return ~VALID_PROPS.indexOf( propKey );
+// }
 
@@ -48,0 +47,0 @@ /**

lib/index.js

@@ -8,4 +8,3 @@ import React from 'react';
   defaults,
-  forEach,
-  isValidProp
+  forEach
 } from './utils';
@@ -33,3 +32,3 @@
     extend = _props.hasOwnProperty('extend');
-  };
+  }
 
@@ -67,5 +66,5 @@ if (props.auto) {
     }
-    // if ( p.canonical && !group['og:url'] ) {
-    //   group['og:url'] = p.canonical;
-    // }
+    if ( p.canonical && !group['og:url'] ) {
+      group['og:url'] = p.canonical;
+    }
   }
@@ -114,8 +113,2 @@ return p;
 
-function insertDocumentMeta ( props ) {
-  removeDocumentMeta();
-
-  forEach( getTags( props ), insertDocumentMetaNode);
-}
-
 function insertDocumentMetaNode ( entry ) {
@@ -134,2 +127,8 @@ const { tagName, ...attr } = entry;
 
+function insertDocumentMeta ( props ) {
+  removeDocumentMeta();
+
+  forEach( getTags( props ), insertDocumentMetaNode);
+}
+
 function render ( meta, opts ) {
@@ -136,0 +135,0 @@ if ( typeof opts !== 'object' ) {

lib/utils.js

@@ -23,3 +23,3 @@ /**
 export function forEach ( arr, fn ) {
-  Array.prototype.slice.call( arr || [] ).forEach( fn );
+  Array.prototype.slice.call( arr || [] ).forEach( fn );
 }
@@ -31,7 +31,7 @@
 
-const VALID_PROPS = ['title', 'description', 'canonical', 'meta', 'link'];
+// const VALID_PROPS = ['title', 'description', 'canonical', 'meta', 'link'];
 
-export function isValidProp ( propKey ) {
-  return ~VALID_PROPS.indexOf( propKey );
-}
+// export function isValidProp ( propKey ) {
+//   return ~VALID_PROPS.indexOf( propKey );
+// }
 
@@ -38,0 +38,0 @@ /**

package.json

 {
   "name": "react-document-meta",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Declarative, nested and stateful HTML document meta tags for React",
@@ -14,3 +14,4 @@ "main": "./dist/index",
     "document",
-    "tags"
+    "tags",
+    "react-component"
   ],
@@ -35,5 +36,5 @@ "peerDependencies": {
   },
-  "repository": "boligbesked/react-document-meta",
+  "repository": "kodyl/react-document-meta",
   "author": "Daniel Juhl",
   "license": "MIT"
-}
+}

README.md

@@ -29,7 +29,39 @@ React Document Meta [![Build Status](https://travis-ci.org/boligbesked/react-document-meta.svg)](https://travis-ci.org/boligbesked/react-document-meta) [![npm version](https://badge.fury.io/js/react-document-meta.svg)](http://badge.fury.io/js/react-document-meta)
 -------------------
-See `example` folder
+See `example` folder for a working sample.
 
+```
+import React from 'react';
+import DocumentMeta from 'react-document-meta';
+
+class Example extends React.Component {
+  render() {
+    const metaData = {
+      title: 'Some Meta Title',
+      description: 'I am a description, and I can create multiple tags',
+      canonical: 'http://example.com/path/to/page',
+      meta: {
+        charset: 'utf-8',
+        name: {
+          keywords: 'react,meta,document,html,tags'
+        }
+      }
+    };
+
+    return (
+      <div>
+        <DocumentMeta {...metaData} />
+        <h1>Hello World!</h1>
+      </div>
+    );
+  }
+}
+
+React.render(<Example />, document.getElementById('root'));
+```
+
 ### Nesting
+In most real world use cases, you would like to set some defaults and modify, replace or add just some of the meta tags. `react-document-meta` always use the deepest data set, but you can add an `extend` attribute (`<DocumentMeta {...metaData} extend />`), to instruct the component to merge with the meta data specified one level up. You can add the `extend` attribute to as many `DocumentMeta` components you would like, but the chain needs to be complete.
 
 ### Automatic meta tags
+`react-document-meta` has the ability to generate meta tags based on the already provided meta data. Currently only open graph title, description and url is supported, which uses the data from `title`, `description` and `canonical`, and only in the case where the values has not be explicit set for `og:title`, `og:description` or `og:url` respectively.
 
@@ -39,3 +71,5 @@
 -------------------
+When using `react-document-meta` in a project with server-side rendering, you would like to have the final meta data chunk available in your HTML output. You can achieve this by calling `DocumentMeta.rewind();` with an optional argument, about how you would like the response. When called with no arguments, you will get the combined meta data as an object as set. `DocumentMeta.rewind( { asReact: true } );` will render to React markup and `DocumentMeta.rewind( { asHtml: true } );` will render to static markup.
 
+**Notice: This argument syntax is very likely to change in v1.0.0**
 
@@ -42,0 +76,0 @@ TODO:

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26423

increased by7.91%

Number of lines in readme file

78

increased by77.27%

Worsened metrics

Lines of code

604

decreased by-0.33%

No dependency changes