react-shave

React component based on the Shave text trimming algorithm.

Usage no npm install needed!

<script type="module">
  import reactShave from 'https://cdn.skypack.dev/react-shave';
</script>

README

React Shave

This component is a simple rewrite of the Shave library.

It allows you to add ellipsis to multi line text.
It doesn't make use of the real Shave library, everything has been re-implemented to limit the access to the DOM directly to let React manage it.

The component is very small and concise, take a look in the /lib folder. 🙂

Demo

Just a small demo of the component:
http://codepen.io/FezVrasta/pen/PGLVNO

Installation

npm install --save react-shave

or

yarn add react-shave

Usage

<Shave maxHeight={70}>
  {someLongTextHere}
</Shave>

Properties

React Shave accepts few properties:

  • maxHeight: required to know the desired max height of the component;
  • tag: by default is p, but you can define any HTML block tag you prefer;
  • character: by default is ellipsis (…) but you can define any string you prefer;

Credits

  • Shave for the awesome library and idea;
  • @vampolo for the final code review;