diff options
| -rw-r--r-- | package-lock.json | 8 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/components/ScrollTopArrow/ScrollTopArrow.tsx | 48 | ||||
| -rw-r--r-- | src/index.tsx | 3 |
4 files changed, 60 insertions, 0 deletions
diff --git a/package-lock.json b/package-lock.json index b8e8d3e..9b01055 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10765,6 +10765,14 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz", "integrity": "sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==" }, + "react-icons": { + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-3.10.0.tgz", + "integrity": "sha512-WsQ5n1JToG9VixWilSo1bHv842Cj5aZqTGiS3Ud47myF6aK7S/IUY2+dHcBdmkQcCFRuHsJ9OMUI0kTDfjyZXQ==", + "requires": { + "camelcase": "^5.0.0" + } + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 9863e0e..a8e1718 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "axios": "^0.19.2", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-icons": "^3.10.0", "react-scripts": "3.4.1", "typeface-roboto": "0.0.75" }, diff --git a/src/components/ScrollTopArrow/ScrollTopArrow.tsx b/src/components/ScrollTopArrow/ScrollTopArrow.tsx new file mode 100644 index 0000000..6b9d5c9 --- /dev/null +++ b/src/components/ScrollTopArrow/ScrollTopArrow.tsx @@ -0,0 +1,48 @@ +import React, { useState } from 'react'; +import { FaArrowCircleUp } from 'react-icons/fa'; +import { makeStyles } from '@material-ui/core'; +import teal from '@material-ui/core/colors/teal'; + +const useStyles = makeStyles(() => ({ + scrollTop: { + position: 'fixed', + width: 50, + bottom: 50, + left: 50, + zIndex: 1000, + cursor: 'pointer', + opacity: 0.5, + '&:hover': { + opacity: '1' + } + } +})); + +const ScrollTopArrow:React.FC = () => { + const [showScroll, setShowScroll] = useState(false); + const classes = useStyles(); + + const checkScrollTop = () => { + if (!showScroll && window.pageYOffset > 400) { + setShowScroll(true); + } else if (showScroll && window.pageYOffset <= 400) { + setShowScroll(false); + } + }; + + const scrollTop = () => { + window.scrollTo({ top: 0 }); + }; + + window.addEventListener('scroll', checkScrollTop); + + return ( + <FaArrowCircleUp + className={classes.scrollTop} + onClick={scrollTop} + style={{ height: 50, display: showScroll ? 'block' : 'none', color: teal[700] }} + /> + ); +}; + +export default ScrollTopArrow; diff --git a/src/index.tsx b/src/index.tsx index a06ec62..1777e90 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -15,6 +15,7 @@ import FeedPage from './pages/FeedPage/FeedPage'; import AuthPage from './pages/AuthPage/AuthPage'; import { User, Page } from './types'; import { get, post } from './requests'; +import ScrollTopArrow from './components/ScrollTopArrow/ScrollTopArrow'; const theme = createMuiTheme({ @@ -93,7 +94,9 @@ const App: React.FC = () => { { page.prefix === 'feed' && <FeedPage navigate={navigate} /> } { page.prefix === 'auth' && <AuthPage logIn={logIn} /> } </div> + <ScrollTopArrow /> </ThemeProvider> + ); }; |