react-clamp

    1.0.5 • Public • Published

    React-clamp

    Inspired by: https://github.com/BeSite/jQuery.dotdotdot

    Internally uses: https://www.npmjs.com/package/clamp-js

    Installation

    npm install --save react-clamp
    

    Sample usage

    import React from 'react'
    import Dotdotdot from 'react-clamp'
    
    ...
    
    render() {
        return (
            <div>
                <Dotdotdot clamp={3} className="three-line-text-clamp">
                    <p>
                        Long, long <br />
                        content,<br />
                        3 lines <br />
                        will be shown.
                    </p>
                </Dotdotdot>
            </div>
        )
    }
    
    

    Dotdotdot props:

    clamp (Number | String | 'auto'). This controls where and when to clamp the text of an element. Submitting a number controls the number of lines that should be displayed. Second, you can submit a CSS value (in px or em) that controls the height of the element as a String. Finally, you can submit the word 'auto' as a string. Auto will try to fill up the available space with the content and then automatically clamp once content no longer fits. This last option should only be set if a static height is being set on the element elsewhere (such as through CSS) otherwise no clamping will be done.

    ellipsis (String). The character to insert at the end of the HTML element after truncation is performed. This defaults to an ellipsis (…).

    className (String). Classes to apply for created element

    Keywords

    none

    Install

    npm i react-clamp

    DownloadsWeekly Downloads

    324

    Version

    1.0.5

    License

    none

    Last publish

    Collaborators

    • kikobeats
    • tally