info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-21 16:41:24 +02:00
Code Issues Releases Wiki Activity

Make share icons to appear on scroll

Browse Source
This commit is contained in:
Kamran Ahmed
2022-11-07 14:36:30 +04:00
parent 7068b95b10
commit 63d07c559a
1 changed files with 17 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/share-icons.tsx
View File

@@ -5,6 +5,7 @@ import TwitterIcon from 'components/icons/twitter-square.svg';
import RedditIcon from 'components/icons/reddit-square.svg'; import RedditIcon from 'components/icons/reddit-square.svg';
import { Icon } from '@chakra-ui/icons'; import { Icon } from '@chakra-ui/icons';
import { getFacebookShareUrl, getHnShareUrl, getRedditShareUrl, getTwitterShareUrl } from '../lib/url'; import { getFacebookShareUrl, getHnShareUrl, getRedditShareUrl, getTwitterShareUrl } from '../lib/url';
import { useEffect, useState } from 'react';
type ShareIconProps = { type ShareIconProps = {
text: string; text: string;
@@ -14,8 +15,23 @@ type ShareIconProps = {
export function ShareIcons(props: ShareIconProps) { export function ShareIcons(props: ShareIconProps) {
const { text, url } = props; const { text, url } = props;
const [offset, setOffset] = useState(0);
useEffect(() => {
const onScroll = () => setOffset(window.scrollY);
window.removeEventListener('scroll', onScroll);
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
if (offset <= 100) {
return null;
}
return ( return (
<Box pos='absolute' left={'-15px'} top={'60px'} height='100%' display={['none', 'none', 'none', 'block']}> <Box pos='absolute' left={'-15px'} top={'190px'} height='100%' display={['none', 'none', 'none', 'block']}>
<Flex pos='sticky' top='100px' flexDir='column'> <Flex pos='sticky' top='100px' flexDir='column'>
<Link target='_blank' color='gray.500' href={getTwitterShareUrl({ url, text })} _hover={{ color: "gray.700" }}><Icon fill='currentColor' height='24px' width='24px' as={TwitterIcon} /></Link> <Link target='_blank' color='gray.500' href={getTwitterShareUrl({ url, text })} _hover={{ color: "gray.700" }}><Icon fill='currentColor' height='24px' width='24px' as={TwitterIcon} /></Link>
<Link target='_blank' color='gray.500' href={getFacebookShareUrl({ url, text })} _hover={{ color: "gray.700" }}><Icon fill='currentColor' height='24px' width='24px' as={FacebookIcon} /></Link> <Link target='_blank' color='gray.500' href={getFacebookShareUrl({ url, text })} _hover={{ color: "gray.700" }}><Icon fill='currentColor' height='24px' width='24px' as={FacebookIcon} /></Link>