scroll-up-react

[]

---

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

1  # with npm:
2  npm install scroll-up-react --save
3
4  # with yarn:
5  yarn add scroll-up-react
6
7  # with pnpm:
8  pnpm add scroll-up-react
9
10  # with bun:
11  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.

1import React from "react";
2import { Progress } from "scroll-up-react";
3
4function App() {
5  return (
6    <>
7      <Progress color1="#3c3c3c" color2="#28935c" size="10px" />
8      <div style={{ height: "100vh" }}></div>
9      <div style={{ height: "100vh" }}></div>
10      <div style={{ height: "100vh" }}></div>
11      <div style={{ height: "100vh" }}></div>
12    </>
13  );
14}
15
16export default App;

Without Customization

You can use the default progress bar without any customization.

1import React from "react";
2import { Progress } from "scroll-up-react";
3
4function App() {
5  return (
6    <>
7      <Progress />
8    </>
9  );
10}
11
12export 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:

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

Author

Amit Jimiwal