Yomnaali22/react-web-share

Tiny web share wrapper with fallback for unsupported browsers

react-web-share

Tiny Web Share API wrapper with fallback for unsupported browsers

💡 most browsers restricts web share api only to https websites

✨ Features

• 🍃 Only ~6kb gzipped and no external dependencies
• 🌀 Uses React Portal
• ✌ Written w/ TypeScript

🔧 Installation

npm i react-web-share    # npm
yarn add react-web-share # yarn

Preview

Mobile

Desktop

📦 Example

import React, { useState } from "react";
import { RWebShare } from "react-web-share";

const Example = () => {
  return (
    <div>
      <RWebShare
        data={{
          text: "Like humans, flamingos make friends for life",
          url: "https://on.natgeo.com/2zHaNup",
          title: "Flamingos",
        }}
        onClick={() => console.log("shared successfully!")}
        styledComp={<Component />}
      >
        <button>Share 🔗</button>
      </RWebShare>
    </div>
  );
};

export default Example;

👀 Props

Prop	Description	Type	Default
data	Share Object	{text, url, title}	{text: "", url: currentURL, title: "Share"}
sites	sites	string[]	all platforms (see list below for key list)
closeText	translate close	string	localise close text
onClick	callback on sucessful share
disableNative	disables native share	boolean	false
styledComp	style share component	react element

🌎 Sites

• facebook
• twitter
• whatsapp
• reddit
• telegram
• linkedin
• mail
• copy (Copy to Clipboard)
• vk
• okru

📜 License

MIT © harshzalavadiya