Need help with react-retro-hit-counter?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

joshwcomeau
139 Stars 7 Forks MIT License 67 Commits 5 Opened issues

Description

🆕 Go back in time with this 90s-style hit counter.

Services available

!
?

Need anything else?

Contributors list

No Data

example image

React Retro Hit Counter

npm GitHub code size in bytes npm

Remember when the web was this quirky place full of "Under Construction" clipart, guestbooks, and web rings? The time when animated GIFs were used for everything - background images, cursors, nothing was off-limits. The time before we learned that BonziBuddy was actually malware.

Sometimes I miss the 90s web. This is a small gesture to help share some of that nostalgia.

Relive your youth with this straight-outta-geocities hit counter. If you have a page on the Information SuperHighway, slap this bad boy on it and impress all your friends.

  • 💾 Retro 90s aesthetic
  • ⚙️ Highly customizable
  • 🔲 Includes optional skeumorphic border, and soft glow.
  • 🔨 Generated on-the-fly with SVG and Canvas. No images, totally scalable.
  • ⚡️ Tiny! <3kb gzip.

Easily the best React counter you'll find anywhere on Altavista.


Is this serious?

Yes! It's a real thing.

» Try the demo! 🎉

Does this actually track hits?

No. This is just a presentational component, you need your own tracking system.

I recommend micro-analytics. Super easy to set up and use.

Compatibility

Compatible with React 15.3 or higher.

Works on all major browsers, including Edge. Haven't tested on IE.

Installation

$ yarn install react-retro-hit-counter
# or
$ npm i -s react-retro-hit-counter

Usage

import RetroHitCounter from 'react-retro-hit-counter';

const YourComponent = () => ( );

API Reference

hits

| Type: | Default Value | | --------- | ----------------- | |

number
|
undefined
|

The number of hits to display!

Protip: You can cheat, I won't tell!

hits={actualNumber * 100}
minLength

| Type: | Default Value | | --------- | ----------------- | |

number
|
4
|

Single-digit hit counters are sad. Start-pad the number with 0s.

minLength

size

| Type: | Default Value | | --------- | ----------------- | |

number
|
40
|

The height, in pixels, of each digit. Not including

padding
.

hits

padding

| Type: | Default Value | | --------- | ----------------- | |

number
|
4
|

The padding, in pixels, around the hit counter.

padding

digitSpacing

| Type: | Default Value | | --------- | ----------------- | |

number
|
3
|

The amount of space, in pixels, between each digit.

digitSpacing

segmentThickness

| Type: | Default Value | | --------- | ----------------- | |

number
|
4
|

The width of each segment, in pixels.

segmentThickness

You can make really abstract numbers with this prop! I've decided that this is a feature, not a bug.

segmentSpacing

| Type: | Default Value | | --------- | ----------------- | |

number
|
0.5
|

Spacing between the segments, in pixels.

segmentSpacing

segmentActiveColor

| Type: | Default Value | | --------- | ----------------- | |

string
|
#76FF03
|

Each digit is comprised of 7 segments, and this prop controls the color of the active ones (AKA the number itself).

segmentActiveColor

segmentInactiveColor

| Type: | Default Value | | --------- | ----------------- | |

string
|
#315324
|

Controls the color of the inactive segments. Pass "transparent" to not show the inactive ones.

segmentInactiveColor

backgroundColor

| Type: | Default Value | | --------- | ----------------- | |

string
|
#222222
|

Set a custom background color for your hit counter. Accepts any valid CSS value (pass "transparent" for no background).

backgroundColor

withBorder

| Type: | Default Value | | --------- | ----------------- | |

boolean
|
true
|

No 90s hit counter would be complete without a skeumorphic chrome border!

withBorder

Protip: You can use the border on your own if you like, it's a named export.

import {RetroBorder} from 'react-retro-hit-counter'
. You'll need to provide an explicit width/height, though (the border is made in Canvas, and I didn't want the cost of reading width/height from the DOM).

You can find its props here

borderThickness

| Type: | Default Value | | --------- | ----------------- | |

number
|
7
|

Width, in pixels, of the border. Only used if

withBorder
is set to
true
.

borderThickness

withGlow

| Type: | Default Value | | --------- | ----------------- | |

boolean
|
false
|

If desired, a soft glow can be emitted from the hit counter. This works especially well with the border.

The color of the glow is based on

segmentActiveColor
.

withGlow

glowSize

| Type: | Default Value | | --------- | ----------------- | |

number
|
2
|

The size of the glow. This parameter controls both the negative margin, in pixels, as well as the blur amount (also in pixels). Only used if

withGlow
is set to
true
.

glowSize

glowStrength

| Type: | Default Value | | --------- | ----------------- | |

number
|
0.4
|

The opacity of the glow. Only used if

withGlow
is set to
true
.

glowStrength

Future Work and Contributions

Wanna help bring that 90s aesthetic back to the web?

There are a few things I'd like to do, and could use a hand with:

  • #1 - The segments are all the same shape. This can be harmful to legibility; ideally, you want the outer pieces to be trapezoids. See an example.

  • #2 - a11y: unclear if the best approach is to use aria tags, or just add actual zero-opacity text like "Hit counter. Number: n" that screen-readers can recite.

  • #3 - Tests! I have very few tests, none on the component itself. This should change.

  • #4 - Build process could use some work, specifically making it easier to work on the demo.

  • Additional flourishes. Transitions right now are just a simple CSS transition, and they're the only animation. Possibly this is good enough and anything else would just be fluff... but I'm curious if we can do anything else to make it more interesting?

To set up locally, simply clone and run

yarn
or
npm i
. Then, run
yarn storybook
to get an interactive sandbox. Add stories as needed to test the contribution.

There's also a demo app, which offers far greater parameter control. You can

cd
into
/demo
, run
yarn
to install the demo dependencies, and then
yarn start
to run the demo. From the parent directory, whenever you
yarn build
, it updates the demo dependency.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.