node package manager
Orgs are free. Discover, share, and reuse code in your team. Create a free org »

hmhyr

HMHYR - Reading progress-bar component for React

Simple components for display reading progress, using .getBoundingClientRect() to calculate position relative to viewport

Demo

Live demo.

Installation

npm install hmhyr --save-dev

Usage

import HMHYR from 'hmhyr';
<HMHYR
  area
  style
  overlayStyle
  target
  static
  title
/>
Option Type Default Description
area object { top: '20%', center: '50%', bottom: '60%' } Progress bar will display if target is in area limit by area.top and area.bottom. Area.center is the point where counter start. All in percentage, relative to viewport, 1% = 1vh
style object Default styling. Use style because of CSS specificities problem. Recommended, default style is crap :(.
overlayStyle object Default styling. Style use for overlay bar
target string Either use target id to determine target or use HMHYR as wrapper of target.
timeCounter None If exist, progress bar will have a estimated read time.
static None. If exist, progress bar background will stay even if target outside valid area ,require style.height value being set.
title string None. Title for being display on progress-bar.

TODO

  • Add support for multiple target per component.
  • Built-in theme.
  • Write unit test.
  • Other position than 'fixed'.

License

HMHYR is available under MIT. See LICENSE for more details.