From 63d07c559ad5dfa99803e72362593f4e2b00285d Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Mon, 7 Nov 2022 14:36:30 +0400 Subject: [PATCH] Make share icons to appear on scroll --- components/share-icons.tsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/components/share-icons.tsx b/components/share-icons.tsx index 8f1d1c501..78a73b6b6 100644 --- a/components/share-icons.tsx +++ b/components/share-icons.tsx @@ -5,6 +5,7 @@ import TwitterIcon from 'components/icons/twitter-square.svg'; import RedditIcon from 'components/icons/reddit-square.svg'; import { Icon } from '@chakra-ui/icons'; import { getFacebookShareUrl, getHnShareUrl, getRedditShareUrl, getTwitterShareUrl } from '../lib/url'; +import { useEffect, useState } from 'react'; type ShareIconProps = { text: string; @@ -14,8 +15,23 @@ type ShareIconProps = { export function ShareIcons(props: ShareIconProps) { 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 ( - +