Skip to content

microlinkhq/nanoclamp

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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

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

About

🗜Responsive clamping component for React

Resources

License

Stars

Watchers

Forks

Packages

No packages published