Tallies

For all your counting needs

Counting

This package is a plug-and-play component that takes in a prop, number and renders it in the familiar system of "fives" (groups of four slashes, crossed) and ones (individual slashes). Without a number prop, the component will render empty, but will not cause an error (it has a default value of 0). That said, number can be any positive integer, but negative numbers will generate a RangeError (and crash the application).

Screenshots:

Tallies with number prop set to 2.

Tallies with number prop set to 7.


Tallies with number prop set to a variable.

Styling

Other available props are for styling, and not given default values. As a result, a Tallies component will inherit the styling of its parents. All available props take in a string which, when following JSX Inline Styling syntax (ie, all values must be strings), will affect given CSS properties of the component. Available props include:

• textColor: to manipulate the component's color field.
• textSize: for fontSize.
• font: for fontFamily.
• lineStyle: targets the textDecorationStyle property to manipulate the style of the strike-through itself (try wavy, it's fun).
• lineColor: same as above, but targets textDecorationColor for its color.
  Note: the last two props work because the tallies are generated with textDecorationLine pre-set to "line-through" in the "fives" section.

Screenshots:

Tallies with no style props.

Tallies with styling inherited from Create React App.

Tallies with Tallies with props textColor={"red} textSize={"4rem"} font={"Georgia, serif"} lineStyle={"wavy"} lineColor={"green"}.

I hope this walkthrough is helpful. And I hope you have fun using the component!
Cheers,
Max