react-web-share

React Web Share is a component that checks if Web Share API is supported in your browser. If is not the case, a fallback replacement appears as part of your website.

Requirements

• React > v16.0.0 - Try out with CRA
• node > 8 - How to install nodejs

Installation

npm install --save react-web-share
# or
yarn add react-web-share

Usage

The children of WebShare component is the trigger of the Web Share API or the Fallback UI to appear.

import React from 'react'
import ReactDOM from 'react-dom'
import WebShare from 'react-web-share'

const Demo = () => (
  <WebShare>
    <button onClick={console.log}>{'Share'}</button>
  </WebShare>
)

ReactDOM.render(<Demo />, document.getElementById('root'))

Props

static propTypes = {
  url: PropTypes.string,
  title: PropTypes.string,
  text: PropTypes.string,
  onShareSuccess: PropTypes.func,
  onShare: PropTypes.func,
  onShareFail: PropTypes.func,
  children: PropTypes.node,
  platforms: PropTypes.arrayOf(PropTypes.string)
}

static defaultProps = {
  url: window.location.href || '',
  title: document.title || '',
  text: '',
  onShareSuccess: noop,
  onShare: noop,
  onShareFail: noop,
  platforms: ['whatsapp', 'telegram', 'facebook', 'email', 'sms']
}

Highly inspired in: github.com/nimiq/web-share-shim