/react-styled-clickable-progress-bar

A clickable progress bar, using styled-components

Primary LanguageJavaScriptMIT LicenseMIT

react-styled-clickable-progress-bar

React component that creates a fixed, clickable, progress bar. It is built using React hooks.

Click on anywhere on the progress bar to automatically scroll the page.

Install

yarn add react-styled-clickable-progress-bar

npm install react-styled-clickable-progress-bar

Usage

Default Progress Bar

import React from "react";
import ProgressBar from "react-styled-clickable-progress-bar";

const Index = props => <ProgressBar />

export default Index;

Customize with styled-components

import React from "react";
import styled from 'styled-components'
import ProgressBar from "react-styled-clickable-progress-bar";

const Scroll = styled(ProgressBar)`
  top: 40px;
`

const Index = props => <Scroll />

export default Index;

Custom Settings

import React from "react";
import ProgressBar from "react-styled-clickable-progress-bar";

const Index = props => <Scroll top={"40px"}/>

export default Index;

Configuration

<ProgressBar
  top="0px"
  left="0px"
  height="5px"
  color="black"
>