scroll-up-react

[]

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:

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