Ellipsis

The Ellipsis component is designed to manage long strings of text by truncating them and optionally allowing users to expand the text to view in full. This component is particularly useful for maintaining a clean UI when dealing with potentially lengthy content such as descriptions, comments, or articles.

Quick Start

To start using the Ellipsis component, import it from the reablocks library and provide the value and limit props.

import { Ellipsis } from 'reablocks';


export default function App() {
  const longString = "Integer a aliquet ligula. Fusce vel eros libero. Sed dictum tincidunt hendrerit. Integer id neque faucibus, imperdiet purus dapibus, rutrum tellus. Nullam facilisis odio sit amet metus efficitur.";


  return (
    <Ellipsis
      value={longString}
      limit={100}
    />
  );
}

import { Ellipsis } from 'reablocks';

export default function App() {
  const longString = "Integer a aliquet ligula. Fusce vel eros libero. Sed dictum tincidunt hendrerit. Integer id neque faucibus, imperdiet purus dapibus, rutrum tellus. Nullam facilisis odio sit amet metus efficitur.";

  return (
    <Ellipsis
      value={longString}
      limit={100}
    />
  );
}

Integer a aliquet ligula. Fusce vel eros libero. Sed dictum tincidunt hendrerit. Integer id neque

Examples

Basic Usage

Expandable Text Section

In this example, the text is truncated with an ellipsis, and users can click on the ellipsis to reveal the hidden text:

Unexpandable Text Section

For cases where the full text should not be expanded within the component but is visible via a tooltip on hover:

API

The Ellipsis component offers flexibility through several properties that adjust its behavior and presentation:

Prop	Description	Default
`value` *	The value to ellipsis. `string`
`expandable`	Whether you can expand or not. Default: true. `boolean`	`true`
`limit`	Limit of characters to show. Default: 256. `number`	`256`
`title`	The title text to show on the hover. `string \| false`
`removeLinebreaks`	Remove line breaks or not. `boolean`	`true`
`className`	Class name for the container. `string`
`theme`	Theme for the Ellipsis. `EllipsisTheme`

Design and Usability Tips

Content Access: Ensure the full content is accessible through interaction (click to expand) or tooltips, preventing loss of critical information.
Adaptive Text: Adjust the amount of truncated text based on the context and importance, ensuring key information is always visible to the user.

Duration Infinity List