react-text-limit-component

A responsive plug and play text-component based on react and made with :heart: for Twitter and inspired by this post.

A big thanks to these gentleman, Superhuman1 and Superhuman2, without whom this wouldn't have been made better.

Demo

Try it out in action here

Installation

Tested with create-react-app v1.5.2 To install it in your create-react-app(CRA) based project, enter:

$ npm i react-text-limit-component

Styling

The component is made responsive by using flexbox since apart from the user defined number of rows prop, it only grows in one axis, i.e, horizontally depending on the viewports and styles specified by users.

Sub-Components

The component is composed of a styled div component with two components namely a styled textarea and a styled fixed width div, which in turn contains two components, a styled p and an svg indicator component.

Some defaults

The default and the minimum row size of the textarea is programmed to be occupying 3 rows of font-family 'Lato' and a fallback to 'Arial'. The reason for this is to comfortably separate the p and the svg component which are vertically aligned inside the second component which as a whole is horizontally adjacent to the textarea component.

The colors at various levels of text percentages on the svg component are defaulted to a palette. Future support for adding user defined colors as props will be added. Feel free to submit a PR if interested.

Usage

Currently the component accepts two props, limit and rows. Limit accepts a number data type and is defined as the character count the component accepts after which the color of the svg indicator component changes to illustrate, the length of characters entered exceeded the accepted length of characters. A default of 10 characters is set. rows accept a number data type and is defined as the number of rows of text the component accepts. The default and a minimum of 3 rows is set.

Optimization

Styled-components was the initial choice as my css-in-js library for it's ease of use, and it got the job done. But I also wanted my component to be performant as well. To measure how it performed under load, I performed an unofficial load test by opening Chrome v65's performance tooling tab and testing it on both 4x and 6x CPU slowdown.

• on type testing with CPU 4x slowdown enabled and approximately 40 wpm, I noticed considerable lag between typing on the keyboard, rendering text and the svg and p tag components on the screen.
• on type testing with CPU 6x slowdown enabled and approximately 40 wpm, I noticed even worse performance.

Upon pondering improving the performance of my component, I ran into this superhuman on Dicord chat, where in he recommended a great optimization trick, which is switching styled-components to the emotion library. The good thing atleast about these both css-in-js libraries is that the API for styling html components is exactly interchangeable with the help of an additional babel plugin. But I ultimately decided not use it since I didn't want the overhead of users installing an additional package which can be easily be avoided by making a small syntax change and thus my css-in-js styles styled with styled-components was retained with the help of just the react-emotion package.

After making this switch and performing the load tests again, I noticed that on CPU 4x slowdown, there was almost no noticeable lag compared to when it was run un-throttled with the paramteres being the same. On CPU 6x slowdown, I noticed minute lags with the parameters being the same, which seemed acceptable according to me.

Feel free to perform additional tests on my component if that sort of stuff tickles you, and do let me know what you find!

Important Notes

I've bundled the package with rollup and compiled to the 'ES' target. Appropriate babel transforms have been applied too. For best performance, I'm assuming users deploy their app with production build of react, since I've only included react and prop-types as peerDependences. Please check the expected versions of react and prop-types to be installed by the user under peerDepepndencies of the 'package.json' file for compatibility. Since the package itself adds upto 6kb as uncompressed and unminified JS, without the external dependencies it installs, the users are expected to perform the process of minification and uglification for the best gains in performance.

Credits

• Main SVG circle chart: https://github.com/sergiop
• Optimization and bundling help: https://github.com/chucksellick

License

MIT © Sumant Kanala