nanoclamp

🗜Responsive clamping component for React

Showing:

Popularity

Downloads/wk

1.7K

GitHub Stars

35

Maintenance

Last Commit

2mos ago

Contributors

5

Package

Dependencies

0

Size (min+gzip)

1.8KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

microlink

Last version NPM Status

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

proptypedefaultdescription
accessibilitybooleantruePass the full unclamped string to the DOM element's title attribute
classNamestringCSS classname(s) added to the string
debouncenumber300Time in milliseconds used for debounce
ellipsisstring'…'String displayed after the clamped text
isstring'div'DOM selector used to render the string
linesnumber3Number of visible lines
textstringText 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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100