feat(native share): Add support for native share using navigator.share (#75)

* feat(add navigator-share) expose handleShare prop which allows navigator share

* chore(release): 1.54.2-navigator-share.0

* refactor code

* chore(release): 1.54.2-navigator-share.1

* make social share a class component and add the check for support of native share as a state

* update read me

* change default value to false for canNativeShare

* remove redundant code

Author: Sinu John

README.md

@@ -422,13 +422,18 @@ import { SocialShare } from '@quintype/components';
 
 class CustomComponent extends React.Component {
 
-  getSocialCardsTemplate({fbUrl, twitterUrl, gplusUrl, linkedinUrl}) {
+  getSocialCardsTemplate({fbUrl, twitterUrl, gplusUrl, linkedinUrl, handleNativeShare}) {
     return <ul className="social-share-icons">
         <li className="social-share-icon">
           <a href={fbUrl} target="_blank">
             <img src={fbIcon} alt="fb icon"/>
           </a>
         </li>
+        {handleNativeShare && <li className="social-share-icon">
+          <button onClick={handleNativeShare}>
+            <img src={fbIcon} alt="share icon"/>
+          </button>
+        </li>}
       </ul>
   }
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/components",
-  "version": "1.54.1",
+  "version": "1.54.2-navigator-share.1",
   "description": "Components to help build Quintype Node.js apps",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",

package.json

@@ -2,26 +2,51 @@ import React from "react";
 import {connect} from "react-redux";
 import {withError} from './with-error';
 
-function SocialShareBase(props) {
-  const fullUrl = `${props.publisherUrl}/${props.url}`;
-  const hashtags = props.hashtags ? props.hashtags : '';
-
-  return React.createElement(props.template, Object.assign({
-    fbUrl: `https://www.facebook.com/sharer.php?u=${fullUrl}`,
-    twitterUrl: `https://twitter.com/intent/tweet?url=${fullUrl}&text=${props.title}&hashtags=${hashtags}`,
-    gplusUrl: `https://plus.google.com/share?url=${fullUrl}`,
-    linkedinUrl: `https://www.linkedin.com/shareArticle?url=${fullUrl}&title=${props.title}`,
-    whatsappUrl: `https://api.whatsapp.com/send?text=${fullUrl}`,
-    mailtoUrl: `mailto:${''}?subject=${props.title}&body=${fullUrl}`
-  }, props));
+function getNativeShareHandler(canNativeShare, title, fullUrl) {   
+  if (!canNativeShare) {
+    return null;
+  }
+
+  return function handleShare() {
+    window.navigator.share({
+      title: title,
+      url: fullUrl,
+    }).catch(console.error);
+  }
 }
 
+class SocialShareBase extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      canNativeShare: false
+    }
+  }
+
+  componentDidMount() {
+    this.setState({canNativeShare: global && global.navigator && global.navigator.share})
+  }
+
+  render() {
+    const fullUrl = `${this.props.publisherUrl}/${this.props.url}`;
+    const hashtags = this.props.hashtags ? this.props.hashtags : '';
+
+    return React.createElement(this.props.template, Object.assign({
+      fbUrl: `https://www.facebook.com/sharer.php?u=${fullUrl}`,
+      twitterUrl: `https://twitter.com/intent/tweet?url=${fullUrl}&text=${this.props.title}&hashtags=${hashtags}`,
+      gplusUrl: `https://plus.google.com/share?url=${fullUrl}`,
+      linkedinUrl: `https://www.linkedin.com/shareArticle?url=${fullUrl}&title=${this.props.title}`,
+      whatsappUrl: `https://api.whatsapp.com/send?text=${fullUrl}`,
+      mailtoUrl: `mailto:${''}?subject=${this.props.title}&body=${fullUrl}`,
+      handleNativeShare: getNativeShareHandler(this.state.canNativeShare, this.props.title, fullUrl)
+    }, this.props));
+  }
+}
 
 function mapStateToProps(state) {
   return {
     publisherUrl: state.qt.config["sketches-host"]
   };
 }
 
-
 export const SocialShare = connect(mapStateToProps, {})(withError(SocialShareBase));