Skip to content

microlinkhq/nanoclamp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

5aa8d54 · Dec 7, 2024
May 7, 2024
Nov 12, 2022
Mar 25, 2024
Nov 23, 2020
Nov 13, 2022
Feb 22, 2018
Nov 12, 2022
Nov 10, 2022
Dec 7, 2024
Nov 12, 2022
May 13, 2023
Dec 7, 2024
Nov 13, 2022
Nov 11, 2022

Repository files navigation

microlink logo microlink logo

Last version NPM Status

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