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 · X @microlinkhq