├── .editorconfig ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── src └── lib │ └── index.jsx └── vite.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ### macOS ### 2 | # General 3 | .DS_Store 4 | 5 | ### VisualStudioCode ### 6 | .vscode/* 7 | 8 | # More... 9 | node_modules/ 10 | dist/ -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .editorconfig 3 | vite.config.js 4 | .gitignore 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Aditya Rao 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-scroll-progress-bar 2 | 3 | React Component for a fixed scroll progress bar. The progress bar can use the default color and height, or can be customized by any user provided height and color. 4 | 5 | ## Install 6 | 7 | ```npm 8 | npm install react-scroll-progress-bar 9 | ``` 10 | 11 | ## Usage 12 | 13 | ### Default Progress Bar: 14 | 15 | ```jsx 16 | import React from "react"; 17 | import ProgressBar from "react-scroll-progress-bar"; //Add this line to import the component 18 | 19 | export default class App extends React.Component { 20 | render() { 21 | return ( 22 |
23 | 24 | //This is all you need to get the default view working 25 |
26 | ); 27 | } 28 | } 29 | ``` 30 | 31 | --- 32 | 33 | ### Custom Progress Bar: 34 | 35 | ```jsx 36 | import React from "react"; 37 | import ProgressBar from "react-scroll-progress-bar"; 38 | 39 | export default class App extends React.Component { 40 | render() { 41 | return ( 42 |
43 | 44 | // Here you can add any react component or jsx // Add ProgressBar at your 45 | top level component or Root component. // Change height and background-color 46 | by setting respective props. 47 |
48 | ); 49 | } 50 | } 51 | ``` 52 | 53 | --- 54 | 55 | ### Configuration: 56 | 57 | ```javascript 58 | 59 | ``` 60 | 61 | **height** - Set height of progress bar. Default height is `8px`. Pass the number not the unit. Unit is `px` 62 | 63 | **bgcolor** - Set background-color of progress bar. Default background-color is `#F43059`. 64 | 65 | **duration** - Set timing-duration for transition property. Default is `1s`. Pass the number not the unit. Unit is `s`(seconds) 66 | 67 | > NOTE: To remove transition animation on progress bar, simply pass `duration="0"` to ProgressBar component. 68 | 69 | --- 70 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-scroll-progress-bar", 3 | "version": "2.0.3", 4 | "description": "A scroll progress bar component for React", 5 | "type": "module", 6 | "files": [ 7 | "dist", 8 | "README.md" 9 | ], 10 | "main": "./dist/react-scroll-progress-bar.umd.js", 11 | "module": "./dist/react-scroll-progress-bar.es.js", 12 | "exports": { 13 | ".": { 14 | "import": "./dist/react-scroll-progress-bar.es.js", 15 | "require": "./dist/react-scroll-progress-bar.umd.js" 16 | } 17 | }, 18 | "scripts": { 19 | "dev": "vite", 20 | "build": "vite build", 21 | "preview": "vite preview", 22 | "test": "echo \"No test specified\"", 23 | "release": "release-it" 24 | }, 25 | "repository": { 26 | "type": "git", 27 | "url": "git+https://github.com/thisisadityarao/react-scroll-progress-bar.git" 28 | }, 29 | "keywords": [ 30 | "react", 31 | "react-component", 32 | "progress-bar" 33 | ], 34 | "author": { 35 | "name": "Aditya Rao" 36 | }, 37 | "license": "MIT", 38 | "bugs": { 39 | "url": "https://github.com/thisisadityarao/react-scroll-progress-bar/issues" 40 | }, 41 | "homepage": "https://github.com/thisisadityarao/react-scroll-progress-bar#readme", 42 | "peerDependencies": { 43 | "react": "^18.2.0", 44 | "react-dom": "^18.2.0" 45 | }, 46 | "devDependencies": { 47 | "@types/react": "^18.2.66", 48 | "@types/react-dom": "^18.2.22", 49 | "@vitejs/plugin-react": "^4.2.1", 50 | "release-it": "^17.3.0", 51 | "vite": "^5.2.0" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/lib/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | const scrollStyle = ( 4 | width, 5 | height = "8", 6 | bgcolor = "#F43059", 7 | duration = "1" 8 | ) => ({ 9 | margin: 0, 10 | padding: 0, 11 | position: "fixed", 12 | top: 0, 13 | zIndex: "9999", 14 | backgroundColor: `${bgcolor}`, 15 | height: `${height}px`, 16 | width: `${width}`, 17 | transitionProperty: "width", 18 | transitionDuration: `${duration}s`, 19 | transitionTimingFunction: `ease-out`, 20 | }); 21 | 22 | class ProgressBar extends Component { 23 | constructor(props) { 24 | super(props); 25 | this.state = { 26 | width: null, 27 | }; 28 | this.Scrolling = this.Scrolling.bind(this); 29 | } 30 | 31 | Scrolling() { 32 | const winScroll = 33 | document.body.scrollTop || document.documentElement.scrollTop; 34 | const height = 35 | document.documentElement.scrollHeight - 36 | document.documentElement.clientHeight; 37 | const scrolled = (winScroll / height) * 100; 38 | if (height > 0) { 39 | this.setState({ width: `${scrolled}%` }); 40 | } else { 41 | this.setState({ width: null }); 42 | } 43 | } 44 | 45 | componentDidMount() { 46 | try { 47 | window.addEventListener("scroll", this.Scrolling); 48 | } catch (oError) { 49 | console.log(oError); 50 | } 51 | } 52 | 53 | componentWillUnmount() { 54 | try { 55 | window.removeEventListener("scroll", this.Scrolling); 56 | } catch (oError) { 57 | console.log(oError); 58 | } 59 | } 60 | 61 | render() { 62 | const { width } = this.state; 63 | const { height, bgcolor, duration } = this.props; 64 | return
; 65 | } 66 | } 67 | 68 | export default ProgressBar; 69 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import path from "path"; 2 | import { defineConfig } from "vite"; 3 | import react from "@vitejs/plugin-react"; 4 | 5 | export default defineConfig({ 6 | build: { 7 | lib: { 8 | entry: path.resolve(__dirname, "src/lib/index.jsx"), 9 | name: "React Scroll Progress Bar", 10 | fileName: (format) => `react-scroll-progress-bar.${format}.js`, 11 | }, 12 | rollupOptions: { 13 | external: ["react", "react-dom"], 14 | output: { 15 | globals: { 16 | react: "React", 17 | }, 18 | }, 19 | }, 20 | }, 21 | plugins: [react()], 22 | }); 23 | --------------------------------------------------------------------------------