v3.0.0 Meta tags support

v3.0.0 Meta tags support

Author: pvoznyuk

README.md

@@ -27,7 +27,7 @@ browser to localhost:3210.
 
 Use the `ScrollableSection` tag to wrap any React element(s), making it a scrollable anchor.
 Use the `ScrollableLink` to wrpar a link to the corresponding section.
-You may also set a `title` attribute if you want to update a document title.
+You may also set a `meta` attribute if you want to update a document title and meta-tags.
 
 ```js
 import React, { Component } from 'react';
@@ -45,11 +45,11 @@ export default class Page extends Component {
           <a> Go to section 2 </a>
         </ScrollableLink> 
 
-        <ScrollableSection name={'section1'} title="Section 1">
+        <ScrollableSection name={'section1'} meta={title: 'Section 1'} >
           <div> Hello World </div>
         </ScrollableSection>
 
-        <ScrollableSection name={'section2'} title="Section 2">
+        <ScrollableSection name={'section2'} meta={title: 'Section 2'}>
           <div> How are you world? </div>
         </ScrollableSection>
       </div>
@@ -132,6 +132,7 @@ configureAnchors({offset: 60})
 | `scrollBehaviour`     | `'smooth'`       | Can be `'smooth'`, `'instant'` and `'auto'`.
 | `scrollOnImagesLoad`  | `false`          | Wait until all the images are loaded before scrolling to the section on page load.
 | `onSectionEnter`      | `null`           | An event that is fired when user reaches to some another section. There are two attributes: `onSectionEnter(newState, oldState)`
+| `meta`                | `null`           | An object that may contain default title and meta-tags to set on page load. e.g. `meta: {title: 'Hello', description: 'World'}` 
 
 ### 3. Utilities
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-update-url-on-scroll",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "description": "Provide updating the URL/hash on page scrolling.",
   "main": "lib/index.js",
   "files": [

package.json

@@ -1,6 +1,7 @@
-import { debounce } from './utils/func';
+import { debounce, getAnchoreByName } from './utils/func';
 import { getBestAnchorGivenScrollLocation, getScrollTop } from './utils/scroll';
 import { getHash, updateHash, removeHash } from './utils/hash';
+import { setMetaTags, getDefaultMetaTags } from './utils/meta';
 
 const defaultConfig = {
   affectHistory: false,
@@ -10,7 +11,8 @@ const defaultConfig = {
   scrollBehaviour: 'smooth',
   scrollDelay: 0,
   scrollOnImagesLoad: false,
-  onSectionEnter: null
+  onSectionEnter: null,
+  meta: null
 }
 
 const EVENT_IMAGES_LOADED = 'images:loaded';
@@ -26,9 +28,10 @@ class Manager {
 
     this.basePath = this.getBasePath();
     this.basePathName = window.location.pathname;
-    this.baseTitle = document.title;
     this.imagesAreLoaded = false;
 
+    this.resetDefaultMetaTags();
+
     setTimeout(() => {
       if (this.config.scrollOnImagesLoad) {
         const imgs = document.images;
@@ -86,6 +89,20 @@ class Manager {
       ...defaultConfig,
       ...config
     }
+    this.resetDefaultMetaTags();
+  }
+
+  resetDefaultMetaTags = () => {
+    if (this.config.meta) {
+      this.defaultMetaTags = getDefaultMetaTags(this.config.meta);
+      setMetaTags(this.defaultMetaTags);
+    } else {
+      this.defaultMetaTags = getDefaultMetaTags();
+    }
+  }
+
+  setDefaultMetaTags = () => {
+    setMetaTags(this.defaultMetaTags);
   }
 
   goToTop = () => {
@@ -97,7 +114,7 @@ class Manager {
     });
   }
 
-  addAnchor = ({element, name, hash, id, title, exact}) => {
+  addAnchor = ({element, name, hash, id, meta, exact}) => {
     // if this is the first anchor, set up listeners
     if (Object.keys(this.anchors).length === 0) {
       this.addListeners();
@@ -118,9 +135,29 @@ class Manager {
       component: element,
       name,
       hash,
-      title,
+      meta,
       exact
     };
+
+    this.normalizeMetaTags();
+  }
+
+  normalizeMetaTags = () => {
+    Object.keys(this.anchors).forEach(anchorId => {
+      const anchor = this.anchors[anchorId];
+      if (anchor.hash && !anchor.meta) {
+
+        if (anchor.exact || !anchor.name) {
+          anchor.meta = this.defaultMetaTags;
+        } else if (anchor.name) {
+          const parentAnchor = getAnchoreByName(this.anchors, anchor.name);
+
+          if (parentAnchor) {
+            anchor.meta = parentAnchor.meta;
+          }
+        }
+      }
+    });
   }
 
   removeAnchor = (id) => {

src/Manager.js

@@ -13,16 +13,14 @@ export default class ScrollableSection extends Component {
     ]),
     name: PropTypes.string,
     hash: PropTypes.string,
-    title: PropTypes.string,
-    formatTitle: PropTypes.func,
     onEnter: PropTypes.func
   }
 
   constructor(props) {
     super(props);
     this.name = (props.name || '').replace(/^\//, '') || null;
     this.hash = (props.hash || '').replace(/^\#/, '') || props.children.ref || null;
-    this.title = props.title || null;
+    this.meta = props.meta || null;
     this.id = createId({name: this.name, hash: this.hash});
   }
 
@@ -35,7 +33,7 @@ export default class ScrollableSection extends Component {
       hash: this.hash,
       exact: !!this.props.exact,
       id: this.id,
-      title: this.title ? this.props.formatTitle(document.title, this.title) : null
+      meta: this.meta
     });
   }
 
@@ -65,7 +63,7 @@ export default class ScrollableSection extends Component {
 }
 
 ScrollableSection.defaultProps = {
-  formatTitle: (baseTitle, segmentTitle) => `${baseTitle} / ${segmentTitle}`
+ 
 };
 
 

src/ScrollableSection.js

@@ -1,6 +1,7 @@
-import Manager from './Manager'
-export const goToTop = Manager.goToTop
-export const configureAnchors = Manager.configure
+import Manager from './Manager';
+export const goToTop = Manager.goToTop;
+export const configureAnchors = Manager.configure;
 
-export { updateHash as goToAnchor, removeHash } from './utils/hash'
+export { setMetaTags } from './utils/meta';
+export { updateHash as goToAnchor, removeHash } from './utils/hash';
 export { default, ScrollableLink } from './ScrollableSection'

src/index.js

@@ -19,3 +19,8 @@ export const debounce = (func, wait, immediate) => {
 }
 
 export const createId = ({name, hash}) => `___scroll-section___${name || ''}___${hash || ''}`;
+
+export const getAnchoreByName = (object = {}, name) => {
+  const key = Object.keys(object).find(key => object[key].name === name && !object[key].hash);
+  return key ? object[key] : null;
+}

src/utils/func.js

@@ -1,7 +1,7 @@
 import {createId} from './func';
+import {setMetaTags} from './meta';
 
 const basePath = `${window.location.origin}${window.location.pathname}`;
-const baseTitle = document.title;
 
 const getCurrentHash = () => decodeURI(window.location.hash.slice(1));
 
@@ -13,25 +13,28 @@ export const getHash = ({manager}) => {
 }
 
 export const updateHash = ({anchor, affectHistory, manager}) => {
-  const {hash, name, title, exact} = anchor;
+  const {hash, name, meta, exact} = anchor;
   const {basePath} = manager;
   const method = affectHistory ? 'pushState' : 'replaceState';
   const newPath = `${name ? `${exact ? window.location.origin : basePath}/${name}` : basePath}${hash ? `#${hash}` : ''}`;
 
   window.history[method](undefined, undefined, newPath);
 
-  if (title) {
-    document.title = title;
+  if (meta) {
+    setMetaTags(meta);
+    console.log('SET', meta);
+  } else {
+    manager.setDefaultMetaTags();
   }
 }
 
 // remove hash in url without affecting history or forcing reload
 export const removeHash = ({manager}) => {
   window.history.replaceState(
     undefined,
-    baseTitle,
+    manager.defaultMetaTags.title,
     manager ? manager.basePath : basePath
   );
 
-  document.title = baseTitle;
+  manager.setDefaultMetaTags();
 }

src/utils/hash.js

@@ -0,0 +1,40 @@
+const getMeta = (metaName) => {
+  const metas = document.getElementsByTagName('meta');
+  return Array.from(metas).find(item => item.getAttribute('name') === metaName);
+}
+
+export const setMetaTags = (metaTagsList = {}) => {
+  const {title, ...metaTags} = metaTagsList;
+
+  if (title) {
+    document.title = title;
+  }
+
+  Object.keys(metaTags).forEach(tagName => {
+    const currentTag = getMeta(tagName);
+
+    if (currentTag) {
+      // update a meta tag
+      currentTag.setAttribute('content', metaTags[tagName]);
+    } else {
+      // create a meta tag
+      const meta = document.createElement('meta');
+      meta.name = tagName;
+      meta.setAttribute('content', metaTags[tagName]);
+      document.getElementsByTagName('head')[0].appendChild(meta);
+    }
+  });
+
+}
+
+export const getDefaultMetaTags = (metaTags) => {
+  if(metaTags) {
+    return metaTags;
+  }
+
+  const metas = document.getElementsByTagName('meta');
+
+  return Array.from(metas).reduce((acc, item) => {
+    return {...acc, [item.getAttribute('name')]: item.getAttribute('content')}
+  }, { title: document.title });
+}