Skip to content

hc-oss/react-web-share

Folders and files

NameName
Last commit message
Last commit date

Latest commit

9bd00d6 Β· Oct 27, 2022

History

36 Commits
Sep 8, 2022
Sep 8, 2022
Sep 8, 2022
Oct 11, 2022
Oct 11, 2022
Sep 8, 2022
Apr 29, 2020
Sep 8, 2022
Sep 8, 2022
Apr 29, 2020
Sep 8, 2022
Oct 27, 2022
Sep 8, 2022
Sep 8, 2022
Oct 11, 2022

Repository files navigation

react-web-share

Tiny Web Share API wrapper with fallback for unsupported browsers

GitHub Actions Status NPM gzip

Edit react-web-share

πŸ’‘ 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

Mobile Preview

Desktop

Desktop Preview

πŸ“¦ 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!")}
      >
        <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

🌎 Sites

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

πŸ“œ License

MIT Β© harshzalavadiya