Scroll-to-top-react NPM

React Component scroll-to-top-react

Note: scroll-to-top-react works with React, Vite, Next.js, and TypeScript.

! Important Note about Next.js

Overview

The Scroll To Top is a React component that provides a scroll-to-top-react button with customizable options. You can specify the display type, image source, custom class, text, and scroll threshold to trigger the button visibility.

You may use predefined CSS and use the class scroll_top in your CSS file to replace current styles or create your own custom CSS to style the button with myClass.

Installation and Import

To install the package, you can use one of the following commands:

  npm install scroll-to-top-react

  yarn add scroll-to-top-react

  pnpm add scroll-to-top-react

To import the component into your project:

  import ScrollToTop from 'scroll-to-top-react';

Props

displayType

Type: string
Options: "text" | "htmlArrow" | "image"
Default: "text"
Description: Determines the type of content to display for the scroll-to-top-react button. if you don't want to use

imageSrc

Type: string
Default: undefined
Description: The source URL of the image to display when displayType is set to "image".

myClass

Type: string
Default: "my_class"
Description: The CSS class to apply to the scroll-to-top-react button.

text

Type: string
Default: "Top"
Description: The text to display when displayType is set to "text". By default, the text is "Top".

threshold

Type: number
Default: 150
Description: The scroll threshold in pixels for showing the scroll-to-top-react button.

Styling and Explanation

.scroll_top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  font-size: 2rem;
  cursor: pointer;
  border-radius: 7px;
  background: #0b293b;
  border: 2px solid #419197;
  color: #419197;
  padding: 0.25rem;
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.5s ease;
  font-weight: 700;
}

.scroll_top.visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.scroll_top:hover {
  color: #58fad9;
  transform: scale(0.9);
}

img.scroll_top {
  width: 2rem;
  height: 2rem;
}

CSS Properties Explained

position: Sets the button in a fixed position on the page.
right:, bottom: Sets the button position 1rem from the right and bottom of the viewport.
font-size: Sets the font size of the text or arrow symbol.
cursor: Sets the cursor to a pointer when hovering over the button.
border-radius: Sets rounds the corners of the button.
background: Sets the background color of the button.
border: Sets a border to the button.
color: Sets the color of the text or arrow symbol.
padding: Sets padding to the left and right of the button.
opacity: Sets the initial opacity to 0, making the button invisible.
transition: Sets smooth transitions for various properties.
transform: scale(value): Sets a new size of the button when hovered over;

Visibility and Hover Effects

.my_class.visible: Styles for when the button is visible.
.my_class.visible:hover: Styles for when the button is hovered over.

If you want to use an image instead of text or arrow symbol

img.my_class: Styles for the image.

Usage Examples

Example 1: Basic Usage with Default Settings

import ScrollToTop from 'scroll-to-top-react';

const App = () => {
  return (
    <>
      <ScrollToTop />
    </>
  );
};

export default App;

Example 2: Custom Class will replace default styles

myClass must be a string.

import ScrollToTop from 'scroll-to-top-react';

const App = () => {
  return (
    <>
      <ScrollToTop myClass="my_class" />
    </>
  );
};

export default App;

Example 3: Custom Text

text must be a string.

import ScrollToTop from 'scroll-to-top-react';

const App = () => {
  return (
    <>
      <ScrollToTop displayType={text} text="Back to Top" />
    </>
  );
};

export default App;

Example 4: Custom HTML Arrow

displayType must be a string.
displayType must be set to "htmlArrow".

import ScrollToTop from 'scroll-to-top-react';

const App = () => {
  return (
    <>
      <ScrollToTop displayType="htmlArrow" />
    </>
  );
};

export default App;

Example 5: Custom Image

Image may have absolute or relative path
imageSrc is required when displayType is set to "image".
imageSrc must be a string.

import ScrollToTop from 'scroll-to-top-react';
import imageSrc from './path/to/your/image.png';

const App = () => {
  return (
    <>
      <ScrollToTop
        displayType="image"
        imageSrc="https://pngtree.com/freepng/arrow-up-glyph-black-icon_4008267.html" // absolute path
        imageSrc={imageSrc} // relative path
      />
    </>
  );
};

export default App;

Example 5: Custom Scroll Threshold

threshold must be a number.
The default value is 150.
The scroll threshold is the number of pixels scrolled before the scroll-to-top-react button is visible.

import ScrollToTop from 'scroll-to-top-react';

const App = () => {
  return (
    <>
      <ScrollToTop threshold={200} />
    </>
  );
};

export default App;

Important Note about Next.js

If you want to use scroll-to-top-react with Next.js, you must create a file with import scroll-to-top-react and add "use client" on top of the file. Example:

"use client"
import ScrollToTop from 'scroll-to-top-react';

const ScrollToTopComponent = () => {
  return (
    <>
      <ScrollToTop />
    </>
  );
};

export default ScrollToTopComponent;

because "use client" is used to declare a boundary between a Server and Client Component modules. This means that by defining a "use client" in a file, all other modules imported into it, including child components, are considered part of the client bundle - and will be rendered by React on the client.

If scroll-to-top-react use with Next.js, by default next use Image component for images. In this component we use img tag. That's mean it will be warning Usingcould result in slower LCP and higher bandwidth. Consider usingfromnext/imageto automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element(@next/next/no-img-element)

What is LCP? LCP stands for Largest Contentful Paint, which is a user-centric web performance metric that measures how long it takes for the largest and most meaningful content element (typically an image or block-level element like a heading) to become visible within the viewport of a web page during its loading process. LCP is a key metric in Google's Core Web Vitals, which are a set of user-focused performance metrics that aim to evaluate the overall user experience of a web page. Icon will have so small size what should affect the speed or performance of your app.