nanoclamp
v2.0.10
Published
Responsive text clamping component for React
Downloads
6,846
Readme
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