npm: possibly marvellous

    react-line-clamp

    1.2.6 • Public • Published

    react-clamp

    A React Component which can help you clamp Multi-line text.

    Getting Started

    • Install with npm: npm install react-line-clamp
    • Clone the repo: https://github.com/oglen/react-clamp

    Usage

    1. require react-clamp to your react component:

       import Clamp from 'react-line-clamp';
      
    2. Use react-clamp in your component:

       class Component extends React.Component {
      
           componentDidMount() {
               window && window.addEventListener('resize', event => {
                   this.refs.aCard.adjustContext();
               });
           }
      
           render() {
               return <div className="container">
                   <div className="grid" id="demo">
                       <div className="column">
                           <Clamp className="card" innerClassName="inner-card" ellipsis="..." ref="aCard" autoAdjustInterval={0} style={{height: '150px'}} innerStyle={{color: "#366"}}>
                           Brisbane’s Waterfront Place and the Eagle Street Pier retail complex were snapped up by property giant Dexus Property Group and Dexus Wholesale Property Fund for a staggering $635 million.
                           </Clamp>
                       </div>
                       <div className="column">
                           <Clamp className="card" innerClassName="inner-card" ellipsis="<span>&nbsp;<a href="#">Read More</a></span>" ref="bCard">
                           Brisbane’s Waterfront Place and the Eagle Street Pier retail complex were snapped up by property giant Dexus Property Group and Dexus Wholesale Property Fund for a staggering $635 million.
                           </Clamp>
                       </div>
                   </div>
               </div>
           }
      
           ...
       }
      

      In default, the option is {autoAdjustInterval: 200}, it will ensure adjusting is automatic.

    3. And set the card style:

       .card {
         height: 60px;
         overflow: hidden;
         line-height: 20px;
       }
      

    Run Demo

    There is a clear and concise example in the repo, preview it in following steps:

    Enter the project fold and execute:

    npm install
    gulp
    

    And visit link:

    /demo/index.html
    

    Install

    npm i react-line-clamp

    DownloadsWeekly Downloads

    92

    Version

    1.2.6

    License

    ISC

    Last publish

    Collaborators

    • oglen