The story of a Compound Timer

Prologue:

The open-source community is quite huge. Usually, for the most common problems, you’d always find a solution. But sometimes, the same solution may or may not fit your use-case.
So, what do we do then? Either, we spend time trying to tweak it or we discard it and prefer to write our version of the same.
Thus, a library was born with a simple focus in mind:- Extensibility.

Chapter 1 (The Situation):

If you are working with Javascript, you’d find plenty of packages solving a problem in their unique way and sometimes, the solution you trust isn’t the solution you want.
Now, let’s say, we want to implement a timer in React.
How do we do it?

1. Write an implementation ourselves
2. Install a package that does the same.

Chapter 2 (The pain):

While developing, one always trusts their code. But what if, the same implementation is the one you despise?
Why? Because it could be either:

1. Unoptimized
2. Lacking proper abstraction
3. Lacking extensibility
4. Containing duplicate code

So, we try the second approach we mentioned before. The journey isn’t any smoother.
Why? As the package, could either:

1. Lack extensibility
2. Be poorly documented
3. Contain extra bloat that we can’t get rid of
4. Not function as intended

Chapter 3 (The solution):

Searching about timers in React, we are greeted with a plethora of packages but most of it coming with its own set of UIs and UXs (at the time of implementation).
Hence, a need was born for a component that could return the computed value without having any design attached to it.

Presenting React-Timer

This package is designed to return the computed value in units. Not hours, minutes, seconds or milliseconds, just plain units. Why? Due to the fact, that it abstracts the implementation of the timer back to the user itself.

How? Here’s an example:

The package saves one the hassle by setting up the basic interval properties to execute a timer and sends back the final value, which then can be used/manipulated/designed as per requirement.

You can try it out here:

yarn add @xendora/react-timer (YARN)
npm install @xendora/react-timer (NPM)

or check out more examples :)

PS:: This package is platform-agnostic, so it’ll work in React Native as well! :P