#Smart Text 0.1.2

SmartText is a text component with automatic line truncation, ideal for interfaces that disable space saving. It allows the user to view only a portion of the text with the option to expand it to see the full content, making the experience more fluid and responsive.

This component is used to display only a portion of the text when it is too large, and then a button like 'Read more' appears to expand it and 'Read less' to collapse it. It is useful in lists, cards or anywhere we want to avoid taking up too much space right away.

Shows a snippet of the content and allows you to expand to read the whole thing when the text is too long.

It is particularly useful for displaying content that may be too long to fit within a single screen or that may require scrolling.

Installation

Install smart-text-react using your preferred package manager:

pnpm add @ela-labs/smart-text-react

Examples: Basic usage

This is a simple example of the SmartText component. It will truncate the text after 2 lines and show a "Read more" button to expand it.

This text is too long to fit in the container, so it will be truncated. The user can click on the "Read more" button to expand and see the full content. This is useful for displaying long text in a compact way, allowing users to choose whether they want to read the entire content or not.

This is a simple example of the SmartText component. It will truncate the text after 1 line and show a "Read more" button to expand it.

This text is too long to fit in the container, so it will be truncated. The user can click on the "Read more" button to expand and see the full content. This is useful for displaying long text in a compact way, allowing users to choose whether they want to read the entire content or not.
Component API
Prop Type Default Description
maxLines number 3 The maximum number of lines to display before truncating the text.
expandable boolean true If true, the text will be expandable and a 'Read more' button will be shown.
expandablePlacement outside-bottom | outside-top outside-bottom The placement of the expandable button. It can be 'outside-top', 'outside-bottom'
readMoreLabel string More The label for the 'Read more' button. This is the text that will be displayed when the text is truncated.
readLessLabel string Less The label for the 'Read less' button. This is the text that will be displayed when the text is expanded.
expandableButton React.ReactNode | ((props: { expanded: boolean; setExpanded: (expanded: boolean) => void; hasOverflow: boolean; }) => React.ReactNode) button A custom button to trigger the expansion of the text. It can be a React node or a function that returns a React node. The function receives an object with the following properties: expanded (boolean), setExpanded (function), hasOverflow (boolean).
expandableClassName string _ The class name to apply to the expandable button. This can be used to style the button.