react-animated-line-clamp

React animated line clamp is a lightweight and zero-dependency package with React functional component for animating text truncation with line clamping.

Description

react-animated-line-clamp provides a simple way to create animated line clamping effects for text content in React applications. It works by dynamically limiting the number of lines of text shown and animates the transition when the text is clamped or expanded. This package is designed to be lightweight, with no external dependencies, making it ideal for performance-conscious applications.

Key Features

• React Component: Easy integration into any React app.
• No Dependencies: No external libraries required.
• Lightweight: Optimized for minimal impact on performance.
• Functional Component: Uses React hooks for simplicity and modern React patterns.
• Animated: Smooth transition when clamping or expanding content.

Demo

React Animated Line Clamp

Installation

You can install the package with following command:

npm install react-animated-line-clamp
# or
yarn add react-animated-line-clamp

Note the following peer dependencies:

• react
• react-dom

Usage

Here is a basic usage example:

import { ReactLineClamp } from 'react-animated-line-clamp';
import styles from './MyFancyComponent.module.css';

const MyFancyComponent = () => {
  return (
    <div>
      <ReactLineClamp
        content={content}
        showMoreButtonContent={'Show More'}
        showLessButtonContent={'Show Less'}
        lineClamp={5}
        duration={600}
        easing="ease-in"
        hideExpandedButton={true}
        classes={{
          blockWrapper: styles.blockWrapperClass,
          contentWrapper: styles.contentWrapperClass,
          button: styles.buttonClass,
          content: styles.contentClass
        }}
      />
    </div>
  );
};

export default MyFancyComponent;

Props

License

MIT License