https://github.com/microlinkhq/nanoclamp

🗜Responsive clamping component for React in 735 bytes.
https://github.com/microlinkhq/nanoclamp

Last synced: 3 months ago
JSON representation

🗜Responsive clamping component for React in 735 bytes.

• Host: GitHub
• URL: https://github.com/microlinkhq/nanoclamp
• Owner: microlinkhq
• License: mit
• Created: 2018-02-22T19:32:25.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-05-09T14:44:59.000Z (6 months ago)
• Last Synced: 2024-07-19T04:02:43.818Z (4 months ago)
• Language: JavaScript
• Homepage: https://nanoclamp.microlink.io
• Size: 731 KB
• Stars: 45
• Watchers: 4
• Forks: 4
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        


  

  

  


  




[![Last version](https://img.shields.io/github/tag/microlinkhq/nanoclamp.svg?style=flat-square)](https://github.com/microlinkhq/nanoclamp/releases)

[![NPM Status](https://img.shields.io/npm/dm/nanoclamp.svg?style=flat-square)](https://www.npmjs.org/package/nanoclamp)

###### [Storybook](https://nanoclamp.netlify.com/)

> Responsive text clamping component. Inspired by [react-clamp-lines](https://github.com/zoltantothcom/react-clamp-lines), but smaller (~1KB).

## Install

```

npm install nanoclamp --save

```

## Usage

```jsx

import NanoClamp from 'nanoclamp';

```

## 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](https://microlink.io), released under the [MIT](https://github.com/microlinkhq/nanoclamp/blob/master/LICENSE.md) License.


Adapted from [`react-clamp-lines`](https://github.com/zoltantothcom/react-clamp-lines) by Brad Adams with help from [contributors](https://github.com/microlinkhq/nanoclamp/contributors).

> [microlink.io](https://microlink.io) · GitHub [microlinkhq](https://github.com/microlinkhq) · Twitter [@microlinkhq](https://twitter.com/microlinkhq)