isabella232 / nanoclamp

🗜Responsive clamping component for React

Storybook

Responsive text clamping component. Inspired by react-clamp-lines, but smaller (~1KB).

Install

npm install nanoclamp --save

Usage

import NanoClamp from 'nanoclamp';

<NanoClamp
  className="custom-class"
  is="p"
  lines={2}
  text={'Some text to clamp.'}
/>

API

prop	type	default	description
accessibility	boolean	true	Pass the full unclamped string to the DOM element's title attribute
className	string		CSS classname(s) added to the string
debounce	number	300	Time in milliseconds used for debounce
ellipsis	string	'…'	String displayed after the clamped text
is	string	'div'	DOM selector used to render the string
lines	number	3	Number of visible lines
text	string		Text you wish to clamp

License

nanoclamp © Microlink, Released under the MIT License.
Adapted from react-clamp-lines by Brad Adams with help from contributors.

microlink.io · GitHub @MicrolinkHQ · Twitter @microlinkhq