“GoToTop”: a (scroll to top elevator) styled component for React JS with TypeScript

I am sharing here a “GoToTop” React JS component that I created today. This component will render a button (shaped as an arrow) when the user scrolls down, past a certain point. When clicked, this button will execute a handleGoToTop() function that will smoothly scroll the screen back to the top.

This is a styled component, making it very portable. It also uses React hooks and TypeScript.

1. The “GoToTop” component

// src/components/GoToTop/index.tsx

import React, { useState, useEffect } from 'react';
import { Container } from './styles';

const GoToTop: React.FC = () => {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    window.addEventListener('scroll',() => {
      const isTop = window.scrollY < 150;

      isTop !== true ? setScrolled(true) : setScrolled(false);
    })
  }, []);

  function handleGoToTop() {
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  } 
  
  return (
    <>
      <Container>
        { scrolled && <button id="goToTop" onClick={() => handleGoToTop()} title="Go to top"></button> }
      </Container>
    </>
  );
}

export default GoToTop;

Read more ““GoToTop”: a (scroll to top elevator) styled component for React JS with TypeScript”

Getting Started with Styled Components in React JS and TypeScript

Among the several strategies aimed at increasing the productivity of a development team, the proper organization of the code related to the software being conceived undoubtedly occupies a preponderant place. Over the years, several methods and tools have been created for this purpose. It is important to know them, especially since they can very concretely result in a substantial saving of time, at least in terms of maintenance activities and bug fixing.

In this context, we’ll take a look at how to deploy styled components in a React JS project with TypeScript using the styled-components library. This technique allows components to contain their own styles. This “encapsulation” of styles also involves CSS in JS, using tagged template literals.

Youtube demo:

Github repository: https://github.com/xdth/styled-components-demo

First step: generation of files and installation of project dependencies

Generate React project files with TypeScript

create-react-app styled-components-demo --template typescript

Read more “Getting Started with Styled Components in React JS and TypeScript”

goMarketplace

One more Rocketseat challenge completed!βœ”οΈ 𝐠𝐨𝐌𝐚𝐫𝐀𝐞𝐭𝐩π₯𝐚𝐜𝐞 is an e-commerce app, built with #ReactNative, #TypeScript and applying techniques such as #TDD, async storage and context API.

Demo

Screenshots

goMarketplace

Source code

Available on my github: https://github.com/xdth/goMarketplace