Nervously Proposing Marriage

    react-clamp-lines
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.2 • Public • Published

    react-clamp-lines

    npm Snyk Vulnerabilities for npm package

    Responsive and accessible clamping component with «Read more»/«Read less» buttons built for React.

    react-clamp-lines

    Demo

    React Clamp Lines

    Install

    npm i react-clamp-lines

    Features

    • built for React with no dependencies
    • option for «Read more» and «Read less» buttons
    • customizable ellipsis text
    • customizable CSS classes
    • responsive
    • accessible
    • window resize event debounced — and why it's important

      If your web app uses JavaScript to accomplish taxing tasks, a debounce function is essential to ensuring a given task doesn't fire so often that it bricks browser performance.

    Usage

    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    import ClampLines from 'react-clamp-lines';
     
    class App extends Component {
      render() {
        return (
          <ClampLines
            text={text_to_clamp}
            id="really-unique-id"
            lines={4}
            ellipsis="..."
            moreText="Expand"
            lessText="Collapse"
            className="custom-class"
            innerElement="p"
          />
        );
      }
    }
     
    ReactDOM.render(<App />, document.getElementById('clamp'));

    The component and the or «Read more» button always have the clamp-lines and clamp-lines__button CSS classes respectively. In the example above the custom-class will be added to clamp-lines, so the output will be:

    <div class="clamp-lines custom-class">
      <p 
        id="clamped-content-really-unique-id"
        aria-hidden="true"
      >
        clamped text here...
      </p>
      <button 
        class="clamp-lines__button"
        aria-controls="clamped-content-really-unique-id"
        aria-expanded="false"
      >
        Expand
      </button>
    </div>

    API

    List of all available props with their default values and description.

    <ClampLines
      text={String}
      id={String}
      lines={Number}
      ellipsis={String}
      buttons={Boolean}
      moreText={String}
      lessText={String}
      className={String}
      delay={Number}
      stopPropagation={Boolean}
      innerElement={String}
    />
    prop required type default value description
    text * {String} Text you wish to clamp
    id * {String} Unique id (used for ARIA props)
    lines {Number} 3 Number of visible lines
    ellipsis {String} ... Text content for the ellipsis - will appear after the clamped lines
    buttons {Boolean} true The «Read more» and «Read less» buttons
    moreText {String} Read more «Read more» button value
    lessText {String} Read less «Read less» button value
    className {String} CSS class names added to component
    delay {Number} 300 Milliseconds, the function is waiting before being triggered, after it stops being called
    stopPropagation {Boolean} false Prevents the event from bubbling up the DOM tree when clicked on the «Read more» button
    innerElement {String} div Custom inner element for clamped text. This MUST be a block level element or styled as one.

    License

    Anyone is free to copy, modify, publish, use, compile, sell, or distribute this software, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.

    See Unlicense for full details.

    Install

    npm i react-clamp-lines

    DownloadsWeekly Downloads

    23,816

    Version

    3.0.2

    License

    Unlicense

    Unpacked Size

    13.7 kB

    Total Files

    5

    Last publish

    Collaborators

    • zoltantoth