I recently made a React app to grab a random passage from the novel Infinite Jest and then send it through a Transformers.js sentiment analysis model: Infinite Sentiment which is here in this repo: https://github.com/cipherphage/Infinite-Sentiment. For a kind of irreverent app I wanted an irreverant feel so I built a React component that displayed text as though it were being typed in real time on a typewriter. Here's an example of it in terminal mode:
As I extend Infinite Sentiment into a more generalized literature sentiment analysis app (see the sentiment-viewer branch: https://github.com/cipherphage/Infinite-Sentiment/tree/sentiment-viewer), I found not only were the typing effect components not essential for the main app, but also they were fun, easy to use and drop in anywhere, and already self-contained. That is, they were perfect for an NPM module.
You can check out the readme for all of the options, props, and general customizability, but the built-in modes are more or less all that's necessary to choose, aside from the text to display, of course! The core modes are:
"typewriter": white background, black text, and a black rectangular typewriter head effect.
"negativeTypewriter": as the name implies: black background, white text, and a white rectangular typewriter head effect.
"blackGreenTerminal": black background, green text, and a green rectangular cursor at the end of the string (as pictured above).
One cool option is that you can adjust the speed and frequency of the typing effect by adjusting the milliseconds and power distribution in the customTypingOptions object. The milliseconds are a bit of a misnomers: the random milliseconds that my function produces do determine the timeout before the reveal of each letter, but the "ms" option determines the range for that randomness and the "pow" option determines the power distribution which skews the range to be more in the shorter intervals. This produces a random distribution that more closely matches, in my opinion, natural human typing.
There are three features I want to add as customTypingOptions:
On/Off switch: pass a boolean prop (isTyping) to interrupt the typing (false) and then continue where it left off (true). This requires a refactor of the main typewriter function into something that can be interrupted, probably utilizing useEffect and useState by passing an index to determine the next character to pass to the typewriter function and eventually the LetterSpanner component rather than directly iterating over the entire array of characters and pausing it on each iteration as I do now.
Repeater: pass a number or string prop (repeat) to repeat the typing, in place, a specified number of times (default is zero) or infinitely.
The ability to support languages whose texts are constructed from particles, such as Chinese, Korean, and Japanese so that they look like they are being naturally typed.
In addition to the above, I wrote two suites of tests, about twelve tests in total, one suite focused on unit tests of helper functions, and one suite focused on component level tests. This serves as a good base of coverage that I will expand on overtime.
