Created
December 23, 2023 22:28
-
-
Save anjalbinayak/7101b4493f5343a12124437ed4602393 to your computer and use it in GitHub Desktop.
LinkShare.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"use client"; | |
import { | |
Box, | |
Button, | |
Link, | |
Modal, | |
ModalBody, | |
ModalCloseButton, | |
ModalContent, | |
ModalFooter, | |
ModalHeader, | |
ModalOverlay, | |
Text, | |
useClipboard, | |
useDisclosure, | |
} from "@chakra-ui/react"; | |
import { FaLink } from "react-icons/fa"; | |
import { TbShare2 } from "react-icons/tb"; | |
import { | |
RiFacebookCircleFill, | |
RiInstagramFill, | |
RiLinkedinFill, | |
RiTelegramFill, | |
RiTwitterFill, | |
RiWhatsappFill, | |
} from "react-icons/ri"; | |
import { useEffect, useState } from "react"; | |
const ICONS = [ | |
{ | |
name: "Facebook", | |
icon: <RiFacebookCircleFill />, | |
url: "https://www.facebook.com/sharer/sharer.php?u=", | |
color: "#3b5998", | |
}, | |
{ | |
name: "Instagram", | |
icon: <RiInstagramFill />, | |
url: "https://www.instagram.com/sharer/sharer.php?u=", | |
color: "#e1306c", | |
}, | |
{ | |
name: "Twitter", | |
icon: <RiTwitterFill />, | |
url: "https://twitter.com/intent/tweet?url=", | |
color: "#1da1f2", | |
}, | |
{ | |
name: "Linkedin", | |
icon: <RiLinkedinFill />, | |
url: "https://www.linkedin.com/shareArticle?mini=true&url=", | |
color: "#0077b5", | |
}, | |
{ | |
name: "Whatsapp", | |
icon: <RiWhatsappFill />, | |
url: "https://api.whatsapp.com/send?text=", | |
color: "#25d366", | |
}, | |
{ | |
name: "Telegram", | |
icon: <RiTelegramFill />, | |
url: "https://telegram.me/share/url?url=", | |
color: "#0088cc", | |
}, | |
]; | |
const LinkShare = () => { | |
const pageLink: string = | |
(typeof window !== "undefined" && window.location.href) || ""; | |
const { isOpen, onOpen, onClose } = useDisclosure(); | |
const [hasAlertBeenShown, setHasAlertBeenShown] = useState(false); | |
const { hasCopied, onCopy } = useClipboard(pageLink); | |
useEffect(() => { | |
const handleScroll = () => { | |
if (!hasAlertBeenShown) { | |
// Check if the user is near the bottom of the page | |
const isNearBottom = | |
window.innerHeight + window.scrollY >= | |
document.body.offsetHeight - 300; | |
// If near the bottom, call onOpen function and set hasAlertBeenShown to true | |
if (isNearBottom) { | |
onOpen(); | |
setHasAlertBeenShown(true); | |
} | |
} | |
}; | |
// Attach the scroll event listener when the component mounts | |
window.addEventListener("scroll", handleScroll); | |
// Cleanup the event listener when the component unmounts | |
return () => { | |
window.removeEventListener("scroll", handleScroll); | |
}; | |
}, [hasAlertBeenShown]); // Include hasAlertBeenShown in the dependency array | |
return ( | |
<> | |
<Button | |
zIndex={100} | |
leftIcon={<TbShare2 fontSize={"17px"} />} | |
onClick={onOpen} | |
colorScheme="blue" | |
size="sm" | |
variant="outline" | |
borderRadius="full" | |
px={4} | |
h={8} | |
fontSize="sm" | |
fontWeight="500" | |
_hover={{ bg: "gray.100", color: "gray.900" }} | |
_active={{ | |
bg: "gray.200", | |
transform: "scale(0.98)", | |
borderColor: "gray.200", | |
}} | |
position={"fixed"} | |
bottom={"1rem"} | |
right={"1rem"} | |
> | |
Share | |
</Button> | |
<Modal blockScrollOnMount={false} isOpen={isOpen} onClose={onClose}> | |
<ModalOverlay /> | |
<ModalContent> | |
<ModalHeader>Social Share</ModalHeader> | |
<ModalCloseButton /> | |
<ModalBody> | |
<Text fontWeight="500" mb="1rem"> | |
Share the link via | |
</Text> | |
<Box display={"flex"} flexDir={"row"}> | |
{ICONS.map((icon) => ( | |
<Link | |
key={icon.name} | |
color={icon.color} | |
mr={2} | |
mb={2} | |
href={icon.url + pageLink} | |
target="_blank" | |
border="1px solid" | |
borderColor={"gray.200"} | |
_hover={{ | |
borderColor: icon.color, | |
}} | |
rounded="lg" | |
fontSize={"2xl"} | |
p={2} | |
> | |
{icon.icon} | |
</Link> | |
))} | |
</Box> | |
<Text mb={1} fontSize={"sm"}> | |
Copy Link | |
</Text> | |
<Text | |
border="1px solid" | |
borderColor="blue.500" | |
rounded="lg" | |
p={2} | |
color="blue.600" | |
onClick={onCopy} | |
> | |
<FaLink style={{ display: "inline" }} /> {pageLink} | |
</Text> | |
</ModalBody> | |
<ModalFooter> | |
<Button colorScheme="blue" w="full" onClick={onCopy}> | |
{hasCopied ? "Copied" : "Copy"} | |
</Button> | |
</ModalFooter> | |
</ModalContent> | |
</Modal> | |
</> | |
); | |
}; | |
export default LinkShare; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment