refactor: ♻️ added few more social networks

Author: harshzalavadiya

README.md

@@ -12,7 +12,7 @@ Tiny [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/
 
 ## ✨ Features
 
-- 🍃 Only ~3kb gzipped and no external dependencies
+- 🍃 Only ~6kb gzipped and no external dependencies
 - 🌀 Uses React Portal
 - ✌ Written w/ TypeScript
 
@@ -61,11 +61,12 @@ 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)   |
-| `onClick` | callback on sucessful share |                      |                                               |
+| 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 |                      |                                               |
 
 ## 🌎 Sites
 
@@ -77,11 +78,8 @@ export default Example;
 - linkedin
 - mail
 - copy (Copy to Clipboard)
-
-## 🤠 Credits
-
-- [TypeScript](https://github.com/microsoft/typescript)
-- [TSDX](https://github.com/jaredpalmer/tsdx)
+- vk
+- okru
 
 ## 📜 License
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-web-share",
   "author": "Harsh Zalavadiya",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "license": "MIT",
   "repository": "harshzalavadiya/react-web-share",
   "module": "dist/react-web-share.esm.js",

src/components/icon/list.tsx

@@ -71,6 +71,20 @@ const iconList: IconListType = {
     color: "#718096",
     e: (l) => navigator.clipboard.writeText(decodeURIComponent(l)),
   },
+  vk: {
+    path: (
+      <path d="M22.7 6.24c.16-.52 0-.9-.73-.9H19.5c-.62 0-.91.32-1.06.69 0 0-1.25 3.04-3.02 5.02-.57.57-.83.75-1.15.75-.15 0-.39-.18-.39-.7V6.24c0-.63-.17-.9-.69-.9H9.34c-.39 0-.62.29-.62.56 0 .59.88.72.97 2.4v3.6c0 .8-.14.95-.45.95-.84 0-2.86-3.06-4.06-6.56-.24-.68-.48-.96-1.1-.96H1.61c-.7 0-.85.33-.85.7 0 .65.84 3.88 3.88 8.14 2.03 2.92 4.9 4.5 7.5 4.5 1.55 0 1.75-.35 1.75-.96 0-2.78-.15-3.04.64-3.04.36 0 .99.18 2.44 1.58 1.67 1.67 1.95 2.42 2.88 2.42h2.45c.7 0 1.06-.35.85-1.05-.46-1.45-3.62-4.44-3.76-4.64-.36-.47-.26-.68 0-1.1 0 0 3-4.21 3.3-5.64Z" />
+    ),
+    color: "#07f",
+    e: (l, t, ti) => externalOpen(`http://vk.com/share.php?url=${l}&title=${ti}&comment=${t}`),
+  },
+  okru: {
+    path: (
+      <path d="M13.6 16.4c1-.3 2-.7 2.8-1.2a1.5 1.5 0 0 0-1.5-2.5 6.3 6.3 0 0 1-6.7 0 1.5 1.5 0 1 0-1.5 2.5c.9.5 1.8 1 2.9 1.2L6.8 19a1.4 1.4 0 1 0 2 2l2.8-2.6 2.7 2.7a1.5 1.5 0 1 0 2-2l-2.7-2.8Zm-2-11.1a2 2 0 1 1 0 4.1 2 2 0 0 1 0-4.1Zm0 7a5 5 0 1 0 0-10 5 5 0 0 0 0 10Z" />
+    ),
+    color: "#e27e35",
+    e: (l) => externalOpen(`https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=${l}`),
+  },
 };
 
 export default iconList;

src/index.tsx

@@ -1,4 +1,4 @@
-import { RWebShareProps } from "interfaces";
+import { RWebShareProps } from "./interfaces";
 import React, { cloneElement, useMemo } from "react";
 
 import Backdrop from "./components/backdrop";
@@ -7,12 +7,14 @@ import Portal from "./components/portal";
 import SocialIcons from "./components/social-icons";
 import useDisclosure from "./hooks/use-disclosure";
 
+const defaultSites = Object.keys(iconList).slice(0, 8);
+
 export const RWebShare = ({
   children,
   closeText,
   data,
   onClick,
-  sites = Object.keys(iconList),
+  sites = defaultSites,
 }: RWebShareProps) => {
   const { onOpen, onClose, isOpen } = useDisclosure();
 
@@ -27,7 +29,7 @@ export const RWebShare = ({
   );
 
   const handleOnClick = async () => {
-    if (window.navigator.share) {
+    if (!window.navigator.share) {
       try {
         await window.navigator.share(shareData);
         onClick();

src/interfaces.ts

@@ -8,7 +8,7 @@ export interface RWebShareProps {
   children: any;
   closeText?: string;
   data: ShareData;
-  sites: string[];
+  sites?: string[];
   onClick?;
 }