https://github.com/amitjimiwal/scroll-up-react
A simple and easy to use npm package for page scroll progress
https://github.com/amitjimiwal/scroll-up-react
npm npm-package
Last synced: 2 months ago
JSON representation
A simple and easy to use npm package for page scroll progress
- Host: GitHub
- URL: https://github.com/amitjimiwal/scroll-up-react
- Owner: amitjimiwal
- Created: 2024-01-17T13:57:45.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-05T06:18:05.000Z (about 1 year ago)
- Last Synced: 2025-02-18T10:43:49.660Z (3 months ago)
- Topics: npm, npm-package
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/scroll-up-react
- Size: 22.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# scroll-up-react
[](https://www.npmjs.com/package/scroll-up-react)
[](https://www.npmjs.com/package/scroll-up-react)
[](https://www.npmjs.com/package/scroll-up-react)
[](https://www.npmjs.com/package/scroll-up-react)
[](https://www.npmjs.com/package/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](#Usage)
## Installation
To install scroll-up-react
```bash
# 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 `` component. When you use the `` 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.
```jsx
import React from "react";
import { Progress } from "scroll-up-react";
function App() {
return (
<>
>
);
}
export default App;
```
#### Without Customization
You can use the default progress bar without any customization.
```jsx
import React from "react";
import { Progress } from "scroll-up-react";
function App() {
return (
<>
>
);
}
export default App;
```
## Progress Component API Reference
Here is the full API for the `` 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](https://www.github.com/amitjimiwal)