Package Exports

scroll-up-react
scroll-up-react/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (scroll-up-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

scroll-up-react

[ GitHub issues ]

An easy to use react component for implementing page scrollbar functionality in your react project.

Features

Easy to use
Fully Customizable. See usage

Installation

To install scroll-up-react

  # with npm:
  npm install scroll-up-react --save

  # with yarn:
  yarn add scroll-up-react

  # with pnpm:
  pnpm add scroll-up-react

  # with bun:
  bun add scroll-up-react

Usage

scroll-up-react exports <Progress> component. When you use the <Progress> component, it will add a progress bar on the top of the page. You can customize the progress bar by passing props like color1 color2 and size.

Basic Usage

Inside your App.tsx/jsx file, import the Progress component and use it.

import React from "react";
import { Progress } from "scroll-up-react";

function App() {
  return (
    <>
      <Progress color1="#3c3c3c" color2="#28935c" size="10px" />
      <div style={{ height: "100vh" }}></div>
      <div style={{ height: "100vh" }}></div>
      <div style={{ height: "100vh" }}></div>
      <div style={{ height: "100vh" }}></div>
    </>
  );
}

export default App;

Without Customization

You can use the default progress bar without any customization.

import React from "react";
import { Progress } from "scroll-up-react";

function App() {
  return (
    <>
      <Progress />
    </>
  );
}

export default App;

Progress Component API Reference

Here is the full API for the <Progress> component, these properties can be set on an instance of Progress:

Parameter	Type	Required	Default	Description	Constraints
`color1`	`string`	No	`#3c3c3c`	First color for the gradient	It must be a valid hexcode
`color2`	`string`	No	`#28935c`	Second color for the gradient	It must be a valid hexcode
`size`	`string`	No	`8px`	Size of the page scrollbar	It must be a valid CSS height property

Contributing

To contribute to the scroll-up-react npm package, you can follow these steps:

Fork the repository on GitHub.
Clone the forked repository to your local machine.
Make the necessary changes or additions to the src/components/Progress.tsx.
Test your changes to ensure they work as expected.
Commit your changes with descriptive commit messages.
Push your changes to your forked repository.
Create a pull request on the original repository to submit your changes for review.

Author

Amit Jimiwal