react-share 3.0.0

.babelrc

@@ -26,11 +26,11 @@
     "with_react_hot_loader": {
       "presets": ["env"],
       "plugins": [
-        "react-hot-loader/babel",
         "transform-runtime",
         "transform-react-jsx",
         "transform-class-properties",
-        "transform-object-rest-spread"
+        "transform-object-rest-spread",
+        "react-hot-loader/babel"
       ]
     }
   }

.eslintrc

@@ -1,13 +1,11 @@
 {
-  "extends": "airbnb",
+  "plugins": ["babel", "react"],
+  "extends": ["airbnb"],
   "env": {
     "es6": true,
     "browser": true
   },
   "parser": "babel-eslint",
-  "plugins": [
-    "react"
-  ],
   "rules": {
     "react/jsx-closing-bracket-location": 0,
     "react/jsx-first-prop-new-line": 0,

CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 3.0.0 (March 24, 2019)
+
+* Added `<PocketShareButton>`
+* Added `<InstapaperShareButton>`
+* Added `borderRadius` prop for icons
+* A default `aria-label` is generated for the share buttons. It is based on the network name. Use `additionalProps` to override.
+* Removed support for Google+.
+* Removed support for `<LinkedInShareCount/>`. LinkedIn no longer provides an API to fetch share counts.
+* Removed `title` and `description` from `<LinkedInShareButtons/>`.
+* Fix: `<EmailShareButton/>` includes `body` before `url`.
+* Fix: `<EmailShareButton/>` and `<ViberShareButton/>` allow customization of `separator`.
+* Fix: `<WeiboShareButton/>` no longer requires `image` prop
+* Fix: `<WeiboShareButton/>` includes url correctly when shared
+* Fix: `<WeiboShareButton/>` and `<OKShareButton/>` open in screen center to prevent window from jumping after opening
+* Thanks @finppp, @madkoding, @andrewl913, @jwrubel, @sinchang and @sergioribeiro!
+
 ## 2.4.0 (Nov 24, 2018)
 
 * Added `<LineShareButton />` and `<WeiboShareButton />`

README.md

@@ -7,6 +7,8 @@
 
 <img src="example.png" alt="Share buttons and counts example" />
 
+Migrating from v2 to v3? Read [changelog](./CHANGELOG.md).
+
 Migrating from v1 to v2? Read [migration notes](./migrate-v1-to-v2.md).
 
 ### Features
@@ -17,7 +19,6 @@ Migrating from v1 to v2? Read [migration notes](./migrate-v1-to-v2.md).
   - Facebook
   - Twitter
   - Telegram
-  - Google+
   - Whatsapp
   - LinkedIn
   - Pinterest
@@ -31,11 +32,11 @@ Migrating from v1 to v2? Read [migration notes](./migrate-v1-to-v2.md).
   - Workplace
   - Line
   - Weibo
+  - Pocket
+  - Instapaper
   - email
 * share counts for
   - Facebook
-  - Google+
-  - Linkedin
   - Pinterest
   - VK
   - Odnoklassniki
@@ -61,23 +62,23 @@ npm install react-share --save
 
 ShareButtons work on all browsers.
 
-ShareCounts works on all browsers, with the exception of Google Plus share count
-working only on IE11 and newer (XHR CORS problem).
+ShareCounts works on all browsers.
 
 ## Compatibility
 
 __Version 1.x.x__: compatible with React versions `0.13.x`, `0.14.x` and `15.x.x`.
 
 __Version 2.x.x__: comptiblity is tested with React 15 and 16.
 
+__Version 3.x.x__: comptiblity is tested with React 15 and 16.
+
 ## API
 
 ### Share buttons
 
 ```js
 import {
   FacebookShareButton,
-  GooglePlusShareButton,
   LinkedinShareButton,
   TwitterShareButton,
   TelegramShareButton,
@@ -92,6 +93,8 @@ import {
   ViberShareButton,
   WorkplaceShareButton,
   LineShareButton,
+  PocketShareButton,
+  InstapaperShareButton,
   EmailShareButton,
 } from 'react-share';
 ```
@@ -100,10 +103,9 @@ import {
 
 |       |Required props|Optional props|
 |-------|--------|--------------|
-|__All__|__`children`__: A React node (e.g. string or element)<br />__`url`__: URL of the shared page (string)|__`disabled`__: Disables click action and adds `disabled` class (bool)<br/>__`disabledStyle`__: Style when button is disabled (object, default = { opacity: 0.6 })<br/>__`windowWidth`, `windowHeight`__: opened window dimensions (int, different defaults for all share buttons)<br>__`beforeOnClick`__: Takes a function that returns a Promise to be fulfilled before calling `onClick`. If you do not return promise, `onClick` is called immediately.<br>__`onShareWindowClose`__: Takes a function to be called after closing share dialog.<br>__`additionalProps`__: An object to pass any additional properties, such as `aria-*` attributes.|
+|__All__|__`children`__: A React node (e.g. string or element)<br />__`url`__: URL of the shared page (string)|__`disabled`__: Disables click action and adds `disabled` class (bool)<br/>__`disabledStyle`__: Style when button is disabled (object, default = { opacity: 0.6 })<br/>__`windowWidth`, `windowHeight`__: opened window dimensions (int, different defaults for all share buttons)<br>__`beforeOnClick`__: Takes a function that returns a Promise to be fulfilled before calling `onClick`. If you do not return promise, `onClick` is called immediately.<br>__`onShareWindowClose`__: Takes a function to be called after closing share dialog.<br>__`additionalProps`__: An object to pass any additional properties, such as `aria-*` attributes. Provides an override possibility for the default `aria-label`.|
 |FacebookShareButton|-|__`quote`__: A quote to be shared along with the link. (string)<br/>__`hashtag`__: A hashtag specified by the developer to be added to the shared content. People will still have the opportunity to remove this hashtag in the dialog. The hashtag should include the hash symbol. (string)|
-|GooglePlusShareButton|-|-|
-|LinkedinShareButton|-|__`title`__: Title of the shared page (string)<br/>__`description`__: Description of the shared page (string)|
+|LinkedinShareButton|-|-|
 |TwitterShareButton|-|__`title`__: Title of the shared page (string)<br/>__`via`__: (string)<br/>__`hashtags`__: (array)|
 |TelegramShareButton|-|__`title`__: Title of the shared page (string)<br/>|
 |WhatsappShareButton|-|__`title`__: Title of the shared page (string)<br/>__`separator`__: Separates title from the url, default: " " (string)|
@@ -114,19 +116,19 @@ import {
 |TumblrShareButton|-|__`title`__: Title of the shared page (string)<br/>__`tags`__: (array)<br/>__`caption`__: Description of the shared page (string)|
 |LivejournalShareButton|-|__`title`__: Title of the shared page (string)<br/>__`description`__: Description of the shared page (string)|
 |MailruShareButton|-|__`title`__: Title of the shared page (string)<br/>__`description`__: Description of the shared page (string)<br/>__`image`__: An absolute link to the image that will be shared (string)|
-|ViberShareButton|-|__`title`__: Title of the shared page (string)<br/>|
+|ViberShareButton|-|__`title`__: Title of the shared page (string)<br/>__`separator`__: Separates title from the url, default: " " (string)|
 |WorkplaceShareButton|-|__`quote`__: A quote to be shared along with the link. (string)<br/>__`hashtag`__: A hashtag specified by the developer to be added to the shared content. People will still have the opportunity to remove this hashtag in the dialog. The hashtag should include the hash symbol. (string)|
 |LineShareButton|-|__`title`__: Title of the shared page (string)|
 |WeiboShareButton|-|__`title`__: Title of the shared page (string)<br/>__`image`__: An absolute link to the image that will be shared (string)|
-|EmailShareButton|-|__`subject`__: Title of the shared page (string)<br/>__`body`__: Body of the email (string), defaults to shared url.|
+|EmailShareButton|-|__`subject`__: Title of the shared page (string)<br/>__`body`__: Body of the email (string), will be prepended to the url.<br/>__`separator`__: Separates body from the url, default: " " (string)<br/>__`openWindow`__: Opens the mail client in a new window. Defaults to false (bool)|
+|PocketShareButton|-|__`title`__: Title of the shared page (string). Note that if Pocket detects a title tag on the page being saved, this parameter will be ignored and the title tag of the saved page will be used instead.|
+|InstapaperShareButton|-|__`title`__: Title of the shared page (string)<br/>__`description`__: Description of the shared page (string)|
 
 ### Share counts
 
 ```js
 import {
   FacebookShareCount,
-  GooglePlusShareCount,
-  LinkedinShareCount,
   PinterestShareCount,
   VKShareCount,
   OKShareCount,
@@ -164,7 +166,6 @@ import {
   TwitterIcon,
   TelegramIcon,
   WhatsappIcon,
-  GooglePlusIcon,
   LinkedinIcon,
   PinterestIcon,
   VKIcon,
@@ -176,6 +177,8 @@ import {
   ViberIcon,
   WorkplaceIcon,
   LineIcon,
+  PocketIcon,
+  InstapaperIcon,
   EmailIcon,
 } from 'react-share';
 ```
@@ -186,6 +189,8 @@ Props:
 
 * `round`: Whether to show round or rect icons (bool)
 
+* `borderRadius`: Allow rounded corners if using rect icons (number)
+
 * `iconBgStyle`: customize background style, e.g. `fill` (object)
 
 * `logoFillColor`: customize logo's fill color (string, default = 'white')

demo/Demo.jsx

@@ -3,16 +3,13 @@
 import React, { Component } from 'react';
 import {
   FacebookShareCount,
-  GooglePlusShareCount,
-  LinkedinShareCount,
   PinterestShareCount,
   VKShareCount,
   OKShareCount,
   RedditShareCount,
   TumblrShareCount,
 
   FacebookShareButton,
-  GooglePlusShareButton,
   LinkedinShareButton,
   TwitterShareButton,
   PinterestShareButton,
@@ -29,10 +26,11 @@ import {
   WorkplaceShareButton,
   LineShareButton,
   WeiboShareButton,
+  PocketShareButton,
+  InstapaperShareButton,
 
   FacebookIcon,
   TwitterIcon,
-  GooglePlusIcon,
   LinkedinIcon,
   PinterestIcon,
   VKIcon,
@@ -47,6 +45,8 @@ import {
   ViberIcon,
   WorkplaceIcon,
   LineIcon,
+  PocketIcon,
+  InstapaperIcon,
 } from 'react-share';
 
 import './Demo.css';
@@ -118,39 +118,16 @@ class Demo extends Component {
           </div>
         </div>
 
-        <div className="Demo__some-network">
-          <GooglePlusShareButton
-            url={shareUrl}
-            className="Demo__some-network__share-button">
-            <GooglePlusIcon
-              size={32}
-              round />
-          </GooglePlusShareButton>
-
-          <GooglePlusShareCount
-            url={shareUrl}
-            className="Demo__some-network__share-count">
-            {count => count}
-          </GooglePlusShareCount>
-        </div>
-
         <div className="Demo__some-network">
           <LinkedinShareButton
             url={shareUrl}
-            title={title}
             windowWidth={750}
             windowHeight={600}
             className="Demo__some-network__share-button">
             <LinkedinIcon
               size={32}
               round />
           </LinkedinShareButton>
-
-          <LinkedinShareCount
-            url={shareUrl}
-            className="Demo__some-network__share-count">
-            {count => count}
-          </LinkedinShareCount>
         </div>
 
         <div className="Demo__some-network">
@@ -187,8 +164,6 @@ class Demo extends Component {
           <OKShareButton
             url={shareUrl}
             image={`${String(window.location)}/${exampleImage}`}
-            windowWidth={660}
-            windowHeight={460}
             className="Demo__some-network__share-button">
             <OKIcon
               size={32}
@@ -268,7 +243,6 @@ class Demo extends Component {
           <ViberShareButton
             url={shareUrl}
             title={title}
-            body="body"
             className="Demo__some-network__share-button">
             <ViberIcon
               size={32}
@@ -302,11 +276,33 @@ class Demo extends Component {
           <WeiboShareButton
             url={shareUrl}
             title={title}
-            pic={`${String(window.location)}/${exampleImage}`}
+            image={`${String(window.location)}/${exampleImage}`}
             className="Demo__some-network__share-button">
             <img className="Demo__some-network__custom-icon" src="http://icons.iconarchive.com/icons/martz90/circle-addon2/512/weibo-icon.png" alt="Weibo share button" />
           </WeiboShareButton>
         </div>
+
+        <div className="Demo__some-network">
+          <PocketShareButton
+            url={shareUrl}
+            title={title}
+            className="Demo__some-network__share-button">
+            <PocketIcon
+              size={32}
+              round />
+          </PocketShareButton>
+        </div>
+
+        <div className="Demo__some-network">
+          <InstapaperShareButton
+            url={shareUrl}
+            title={title}
+            className="Demo__some-network__share-button">
+            <InstapaperIcon
+              size={32}
+              round />
+          </InstapaperShareButton>
+        </div>
       </div>
     );
   }

demo/Root.jsx

@@ -0,0 +1,9 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { hot } from 'react-hot-loader/root';
+
+import Demo from './Demo';
+
+const Root = () => <Demo />;
+
+export default hot(Root);

demo/index.jsx

@@ -1,16 +1,12 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Demo from './Demo';
+import Root from './Root';
 
 const rootElement = document.createElement('div');
 
 if (!document.querySelector('div')) {
   document.body.appendChild(rootElement);
 }
 
-ReactDOM.render(<Demo />, rootElement);
-
-if (module.hot) {
-  module.hot.accept();
-}
+ReactDOM.render(<Root />, rootElement);

docs/index.html

@@ -5,5 +5,5 @@
     <title>react-share demo | Social media share buttons and share counts for React.</title>
   </head>
   <body>
-  <script type="text/javascript" src="main.031dcc7181405ee17c67.bundle.js"></script></body>
+  <script type="text/javascript" src="main.dc127c7d6e56dd77f814.bundle.js"></script></body>
 </html>