Skip to content

Commit 0a74aed

Browse files
harshzalavadiyaharshzalavadiya
authored
🐛 missing query-string params (#5)
1 parent 9bc3676 commit 0a74aed

File tree

5 files changed

+43
-20
lines changed

5 files changed

+43
-20
lines changed

‎package.json‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
{
22
"name": "react-web-share",
33
"author": "Harsh Zalavadiya",
4-
"version": "1.0.8",
4+
"version": "1.0.9",
55
"license": "MIT",
66
"repository": "harshzalavadiya/react-web-share",
77
"module": "dist/react-web-share.esm.js",
88
"main": "dist/index.js",
99
"typings": "dist/index.d.ts",
10+
"sideEffects": false,
1011
"files": [
1112
"dist",
1213
"src"
@@ -59,5 +60,16 @@
5960
"track": [
6061
"./dist/*.production.min.js"
6162
]
62-
}
63+
},
64+
"keywords": [
65+
"react",
66+
"share",
67+
"web-share",
68+
"native",
69+
"fallback",
70+
"polyfill",
71+
"component",
72+
"tiny",
73+
"lightweight"
74+
]
6375
}

‎src/components/backdrop.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const BackdropContainerStyle: CSSProperties = {
1414
zIndex: 1400,
1515
};
1616

17-
const inEffect = `.web-share-fade{animation-name:simpleFade;animation-duration:.2s;animation-fill-mode:both}@keyframes simpleFade{0%{opacity:0}100%{opacity:1}}.web-share-fade-in-up{animation-name:fadeInUp;animation-duration:.45s;animation-fill-mode:both}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}`;
17+
const inEffect = `.web-share-fade{animation:simpleFade 0.5s;animation-fill-mode:both }@keyframes simpleFade{0%{opacity:0 }100%{opacity:1 }}.web-share-fade-in-up{animation:fadeInUp 0.5s;animation-fill-mode:both }@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px) }100%{opacity:1;transform:translateY(0) }}`;
1818

1919
export default function Backdrop({ children, onClose }) {
2020
const handleOnClose = e => {

‎src/components/icon/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const SocialIconStyle: CSSProperties = {
1616

1717
export default function Icon({ name, data, onClose }: IconProps) {
1818
const { path, viewBox = "0 0 24 24", color, e } = iconList[name];
19+
1920
return (
2021
<button
2122
onClick={() => e(data.url, data.text, data.title) && onClose()}

‎src/components/icon/list.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
import React from "react";
22

33
export interface IconListType {
4-
[key: string]: { path: JSX.Element; e; color: string; viewBox?: string };
4+
[key: string]: {
5+
path: JSX.Element;
6+
e;
7+
color: string;
8+
viewBox?: string;
9+
};
510
}
611

712
const iconList: IconListType = {
813
facebook: {
914
path: (
10-
<path d="M23.998 12c0-6.628-5.372-12-11.999-12C5.372 0 0 5.372 0 12c0 5.988 4.388 10.952 10.124 11.852v-8.384H7.078v-3.469h3.046V9.356c0-3.008 1.792-4.669 4.532-4.669 1.313 0 2.686.234 2.686.234v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.469h-2.796v8.384c5.736-.9 10.124-5.864 10.124-11.853z" />
15+
<path d="M24 12a12 12 0 10-13.9 11.9v-8.4h-3V12h3V9.4c0-3 1.8-4.7 4.6-4.7l2.6.2v3h-1.5c-1.5 0-2 .9-2 1.8V12h3.4l-.5 3.5h-2.8v8.4A12 12 0 0024 12z" />
1116
),
1217
color: "#0076FB",
1318
e: l => window.open(`https://www.facebook.com/sharer/sharer.php?u=${l}`),
@@ -21,21 +26,21 @@ const iconList: IconListType = {
2126
},
2227
whatsapp: {
2328
path: (
24-
<path d="M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.14-.67.15-.2.3-.76.97-.94 1.17-.17.2-.34.22-.64.07s-1.26-.46-2.4-1.47a8.95 8.95 0 01-1.64-2.06c-.18-.3-.02-.46.13-.6.13-.14.3-.35.44-.53.15-.17.2-.3.3-.5.1-.2.05-.36-.03-.51l-.91-2.21c-.24-.58-.49-.5-.67-.51l-.57-.01c-.2 0-.52.07-.8.37-.26.3-1.03 1.02-1.03 2.48s1.06 2.88 1.21 3.08c.15.2 2.1 3.2 5.08 4.48.7.3 1.26.5 1.7.63.7.22 1.35.2 1.86.11.57-.08 1.76-.71 2-1.4.26-.7.26-1.3.18-1.42-.07-.13-.27-.2-.57-.35m-5.42 7.4A9.87 9.87 0 017 20.41l-.36-.22-3.74.99 1-3.65-.23-.38a9.86 9.86 0 01-1.51-5.26 9.9 9.9 0 0116.87-6.98 9.82 9.82 0 012.9 7 9.9 9.9 0 01-9.89 9.88m8.41-18.3A11.81 11.81 0 0012.05 0a11.91 11.91 0 00-10.3 17.84L.05 24l6.31-1.65a11.88 11.88 0 005.68 1.44h.01c6.55 0 11.89-5.33 11.9-11.89a11.82 11.82 0 00-3.49-8.41z" />
29+
<path d="M17.5 14.4l-2-1c-.3 0-.5-.1-.7.2l-1 1.1c-.1.2-.3.3-.6.1s-1.3-.5-2.4-1.5a9 9 0 01-1.7-2c-.1-.3 0-.5.2-.6l.4-.6c.2-.1.2-.3.3-.5v-.5L9 7c-.2-.6-.4-.5-.6-.5h-.6c-.2 0-.5 0-.8.4-.2.3-1 1-1 2.5s1 2.8 1.2 3c.2.2 2.1 3.2 5.1 4.5l1.7.6a4 4 0 001.9.2c.5-.1 1.7-.8 2-1.5.2-.6.2-1.2.1-1.4l-.5-.3M12 21.8a9.9 9.9 0 01-5-1.4l-.4-.2-3.7 1 1-3.7-.2-.3a9.9 9.9 0 01-1.5-5.3 9.9 9.9 0 0116.8-7 9.8 9.8 0 013 7 9.9 9.9 0 01-10 9.9m8.4-18.3A11.8 11.8 0 0012.1 0 12 12 0 001.8 17.8L0 24l6.4-1.6a11.9 11.9 0 005.6 1.4 12 12 0 0012-11.9 11.8 11.8 0 00-3.5-8.4z" />
2530
),
2631
color: "#25D366",
2732
e: (l, t) => window.open(`https://api.whatsapp.com/send?text=${t} ${l}`),
2833
},
2934
reddit: {
3035
path: (
31-
<path d="M12 0A12 12 0 000 12a12 12 0 0012 12 12 12 0 0012-12A12 12 0 0012 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 01-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 01.042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 014.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 01.14-.197.35.35 0 01.238-.042l2.906.617a1.214 1.214 0 011.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 00-.231.094.33.33 0 000 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 00.029-.463.33.33 0 00-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 00-.232-.095z" />
36+
<path d="M12 0A12 12 0 000 12a12 12 0 0012 12 12 12 0 0012-12A12 12 0 0012 0zm5.01 4.74c.69 0 1.25.56 1.25 1.25a1.25 1.25 0 01-2.5.06l-2.6-.55-.8 3.75c1.83.07 3.48.63 4.68 1.49.3-.31.73-.5 1.2-.5.97 0 1.76.8 1.76 1.76 0 .72-.43 1.33-1.01 1.61a3.11 3.11 0 01.04.52c0 2.7-3.13 4.87-7 4.87-3.88 0-7-2.17-7-4.87 0-.18 0-.36.04-.53A1.75 1.75 0 014.03 12a1.75 1.75 0 012.96-1.26 8.52 8.52 0 014.74-1.5l.89-4.17a.34.34 0 01.14-.2.35.35 0 01.24-.04l2.9.62a1.21 1.21 0 011.11-.7zM9.25 12a1.25 1.25 0 101.25 1.25c0-.69-.56-1.25-1.25-1.25zm5.5 0a1.25 1.25 0 000 2.5 1.25 1.25 0 000-2.5zm-5.47 3.99a.33.33 0 00-.23.1.33.33 0 000 .46c.84.84 2.49.91 2.96.91.48 0 2.1-.06 2.96-.91a.36.36 0 00.03-.47.33.33 0 00-.46 0c-.55.54-1.68.73-2.51.73-.83 0-1.98-.2-2.51-.73a.33.33 0 00-.24-.1z" />
3237
),
3338
color: "#FF4500",
3439
e: (l, t) => window.open(`http://www.reddit.com/submit?url=${l}&title=${t}`),
3540
},
3641
telegram: {
3742
path: (
38-
<path d="M23.91 3.79L20.3 20.84c-.25 1.21-.98 1.5-2 .94l-5.5-4.07-2.66 2.57c-.3.3-.55.56-1.1.56-.72 0-.6-.27-.84-.95L6.3 13.7l-5.45-1.7c-1.18-.35-1.19-1.16.26-1.75l21.26-8.2c.97-.43 1.9.24 1.53 1.73z" />
43+
<path d="M23.91 3.79L20.3 20.84c-.25 1.21-.98 1.5-2 .94l-5.5-4.07-2.66 2.57c-.3.3-.55.56-1.1.56-.72 0-.6-.27-.84-.95L6.3 13.7.85 12c-1.18-.35-1.19-1.16.26-1.75l21.26-8.2c.97-.43 1.9.24 1.53 1.73z" />
3944
),
4045
color: "#0088CC",
4146
e: (l, t) => window.open(`https://telegram.me/share/msg?url=${l}&text=${t}`),
@@ -52,14 +57,14 @@ const iconList: IconListType = {
5257
},
5358
mail: {
5459
path: (
55-
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" />
60+
<path d="M20 4H4a2 2 0 00-2 2v12c0 1.1.9 2 2 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" />
5661
),
5762
color: "#E53E3E",
5863
e: (l, t) => window.open(`mailto:?body=${l}&subject=${t}`),
5964
},
6065
copy: {
6166
path: (
62-
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path>
67+
<path d="M16 1H4a2 2 0 00-2 2v14h2V3h12V1zm3 4H8a2 2 0 00-2 2v14c0 1.1.9 2 2 2h11a2 2 0 002-2V7a2 2 0 00-2-2zm0 16H8V7h11v14z" />
6368
),
6469
color: "#718096",
6570
e: l => navigator.clipboard.writeText(l),

‎src/index.tsx‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { RWebShareProps } from "interfaces";
2-
import React, { cloneElement } from "react";
2+
import React, { cloneElement, useMemo } from "react";
33

44
import Backdrop from "./components/backdrop";
55
import iconList from "./components/icon/list";
@@ -9,17 +9,22 @@ import useDisclosure from "./hooks/use-disclosure";
99

1010
export const RWebShare = ({ children, data, sites = Object.keys(iconList) }: RWebShareProps) => {
1111
const { onOpen, onClose, isOpen } = useDisclosure();
12-
const shareData = {
13-
title: "share",
14-
text: "",
15-
url: typeof window !== `undefined` ? window.location.href : undefined,
16-
...data,
17-
};
12+
13+
const shareData = useMemo(
14+
() => ({
15+
...data,
16+
title: data.title || "share",
17+
text: data.text || "",
18+
url: encodeURIComponent(data.url || window?.location?.href || ""),
19+
}),
20+
[data]
21+
);
1822

1923
const handleOnClick = () => {
20-
if ((window as any).navigator.share) {
21-
(window as any).navigator.share(shareData).catch(console.error);
22-
} else {
24+
try {
25+
window.navigator.share(shareData);
26+
} catch (e) {
27+
console.warn(e);
2328
onOpen();
2429
}
2530
};

0 commit comments

Comments
 (0)