Nutritious Polygonal Meatball

    use-dotdotdot
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    use-dotdotdot

    A hook to use CSS property, line-clamp, for the long text.

    If only one line, use text-overflow for the long text.

    If the browser doesn't support line-clamp and need multiline text, use the canvas api, measureText, to generate clamp text.

    Installation

    npm install use-dotdotdot
    
    or
    
    yarn add use-dotdotdot
    

    Props

    Name Type Description
    width? string or number The width of wrapper. If not provide, the width is 100%
    maxLines number How many lines at most
    wrapper? React.ElementType Default value is span

    Example

    import { useDotdotdot } from 'use-dotdotdot';
    
    const App = () => {
      const { wrapperProps, clampText } = useDotdotdot({ maxLines: 2 });
    
      return (
        <div {...wrapperProps}>
          {clampText(
            'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex, deleniti. Ratione voluptatibus ducimus pariatur ab eaque ut vitae, reprehenderit, fugit corrupti quas impedit eum, aut veniam facilis voluptate commodi non?'
          )}
        </div>
      );
    };

    or use useDotdotdot create your own Component

    Install

    npm i use-dotdotdot

    DownloadsWeekly Downloads

    95

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    41.4 kB

    Total Files

    15

    Last publish

    Collaborators

    • jyunhanlin