Truncate String

Installation

npm i @snack-uikit/truncate-string

Changelog

Description

• Пакет @snack-uikit/truncate-string предоставляет компонент TruncateString для обрезания длинных текстовых строк с автоматическим отображением тултипа с полным текстом при необходимости.
• Компонент поддерживает два варианта обрезания: end (с конца строки, по умолчанию) и middle (по середине), что позволяет гибко адаптировать отображение текста под разные сценарии интерфейса.
• TruncateString автоматически определяет, был ли текст обрезан, и показывает тултип с полным содержимым только когда это необходимо, что улучшает пользовательский опыт при работе с длинными строками.
• Компонент поддерживает многострочное обрезание через проп maxLines, позволяя ограничивать текст несколькими строками с многоточием в конце.
• Позиция тултипа, условие его отображения (hover, click, focus и их комбинации) и возможность скрыть тултип полностью настраиваются через соответствующие пропы.
• Компонент реагирует на изменение размера контейнера через ResizeObserver, автоматически пересчитывая необходимость обрезания при изменении доступного пространства.

Example

import { TruncateString } from '@snack-uikit/truncate-string';

function Example() {
  return (
    <div style={{ width: '200px' }}>
      <TruncateString
        variant="end"
        placement="top"
        hideTooltip={false}
        text="Очень длинный текст, который будет обрезан с конца строки"
        maxLines={2}
        trigger="hover"
      />
    </div>
  );
}

TruncateString

Props

| name | type | default value | description | |------|------|---------------|-------------| | text* | string | - | Текст, который будет обрезаться | | variant | "middle" | "end" | end | Вариант обрезания строки: - End - с конца - Middle - по середине | | className | string | - | CSS-класс | | tooltipClassName | string | - | Стиль для тултипа | | hideTooltip | boolean | - | Скрывать ли тултип с полным текстом | | maxLines | number | - | Максимальное кол-во строк, до которого может сворачиваться текст. | | placement | enum Placement: "left", "left-start", "left-end", "right", "right-start", "right-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end" | - | Положение тултипа относительно обрезанного текста. | | trigger | enum Trigger: "click", "hover", "focusVisible", "focus", "hoverAndFocusVisible", "hoverAndFocus", "clickAndFocusVisible" | - | Условие отображения тултипа |

Troubleshooting

Если компонент работает некорректно, проверь:

• <TruncateString /> должен лежать в органиченном по ширине контейнере, иначе он не сможет правильно высчитывать обрезание.
• если с ограничением по ширине тоже возникают проблемы, можно попробовать задать на компоненте-обёртке св-во display: grid