React Line Clamp

A flexible and performant React component for clamping content to a specified number of lines with expand/collapse functionality.

Features

• 🎯 Precise line clamping - Uses CSS line-clamp for optimal performance
• 🔄 Expand/Collapse functionality - Built-in toggle with customizable text
• 🎨 Highly customizable - Custom styles, classes, and button components
• 📱 Responsive - Automatically recalculates on window resize
• 🧩 Flexible content - Supports text, JSX, and any React content
• 🔧 TypeScript support - Full type definitions included
• ⚡ Lightweight - Zero dependencies (except React)
• 🧩 Flexible API - Controlled and uncontrolled modes

Installation

npm install react-truncate-line-clamp

or

yarn add react-truncate-line-clamp

Usage

Basic Example

import LineClamp from 'react-truncate-line-clamp';

function App() {
  return (
    <LineClamp lines={3}>
      This is a very long text that will be clamped to 3 lines. Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </LineClamp>
  );
}

With Custom Expand/Collapse Text

<LineClamp
  lines={2}
  expandText="Read more"
  collapseText="Show less"
>
  Your long text here...
</LineClamp>

Without Toggle Button

<LineClamp lines={3} showButton={false}>
  Your long text here...
</LineClamp>

With Custom Styling

<LineClamp
  lines={3}
  className="my-custom-class"
  style={{
    fontSize: '16px',
    lineHeight: '1.5',
    color: '#333'
  }}
>
  Your long text here...
</LineClamp>

With Rich Content

<LineClamp lines={3}>
  <p>This component now supports <strong>rich content</strong>!</p>
  <p>You can include <em>multiple paragraphs</em>, <a href="#">links</a>, and other elements.</p>
  <p>Perfect for blog previews, product descriptions, and more complex layouts.</p>
</LineClamp>

Controlled Mode

import { useState } from 'react';
import LineClamp from 'react-truncate-line-clamp';

function ControlledExample() {
  const [expanded, setExpanded] = useState(false);

  return (
    <LineClamp
      lines={3}
      expanded={expanded}
      onToggle={setExpanded}
    >
      Your long content here...
    </LineClamp>
  );
}

Custom Button Component

const CustomButton = ({ onClick, children }) => (
  <button
    onClick={onClick}
    className="btn btn-primary"
  >
    {children}
  </button>
);

<LineClamp
  lines={3}
  buttonComponent={CustomButton}
>
  Your long content here...
</LineClamp>

API Reference

Props

Prop	Type	Default	Description
children	React.ReactNode	-	Required. The content to be clamped
lines	number	-	Required. Maximum number of lines to display
className	string	""	Additional CSS classes
style	React.CSSProperties	{}	Custom styles
expandText	string	"Show more"	Text to show when content is clamped
collapseText	string	"Show less"	Text to show when content is expanded
showButton	boolean	true	Whether to show expand/collapse buttons
buttonComponent	React.ComponentType	-	Custom button component
onToggle	(expanded: boolean) => void	-	Callback when expand/collapse state changes
expanded	boolean	-	Control the expanded state (controlled mode)

TypeScript

The component is written in TypeScript and includes full type definitions. The main interface is:

interface LineClampProps {
  children: React.ReactNode;
  lines: number;
  className?: string;
  style?: React.CSSProperties;
  collapseText?: string;
  expandText?: string;
  showButton?: boolean;
  buttonComponent?: React.ComponentType<{
    onClick: () => void;
    children: React.ReactNode;
  }>;
  onToggle?: (expanded: boolean) => void;
  expanded?: boolean;
}

Browser Support

This component uses CSS line-clamp which is supported in:

• Chrome 6+
• Firefox 68+
• Safari 5+
• Edge 17+

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © [Your Name]