https://github.com/holybasil/squirrel-ellipsis
multiline text ellipsis
https://github.com/holybasil/squirrel-ellipsis
Last synced: 2 months ago
JSON representation
multiline text ellipsis
- Host: GitHub
- URL: https://github.com/holybasil/squirrel-ellipsis
- Owner: Holybasil
- Created: 2024-01-21T06:23:52.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-22T14:03:58.000Z (over 1 year ago)
- Last Synced: 2025-03-21T00:13:42.924Z (2 months ago)
- Language: TypeScript
- Size: 55.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# squirrel-ellipsis
an Expandable Multiline Text Component designed for React
> :sparkles: inspired by [react-lines-ellipsis](https://github.com/xiaody/react-lines-ellipsis)
# squirrel-ellipsis
an Expandable Multiline Text Component designed for React
## Preview
```jsx
import SquirrelEllipsis from "squirrel-ellipsis";
...
const EXAMPLE_TEXT =
"Roughly a year ago I moved into my new apartment. One of the reasons I picked this apartment was age of the building. The construction was finished in 2015, which ensured pretty good thermal isolation for winters as well as small nice things like Ethernet ports in each room. However, there was one part of my apartment that was too new and too smart for me. ";
More
}
basedOn="words"
onReflow={handleReflow}
/>;
```
## Features
- :fax: **Multiline Text Ellipsis:** Supports the display of multiline text and allows customization of the maximum number of lines shown.
- :pencil: **Automatic Punctuation Removal at Ellipsis:** When text is truncated, the component automatically removes any punctuation marks at the end of the visible text.
- :ghost: **Expandable Content with Customizable Ellipsis and Button:** Users can expand the text to view the full content. The component supports customization of both the ellipsis indicator and the expand button.
- :mushroom: **Responsive Design:** Implemented using ResizeObserver for responsive behavior, ensuring the component adjusts to varying container sizes.
- :paw_prints: **Reflow Callback:** On reaching its final display state, the component calls a reflow function. This feature can be integrated with react-virtualized's CellMeasurer to achieve a virtual list with variable row heights.
## Options
| key | desc | type | defaultValue |
| ----------- | ----------------------------------------------------------------- | ------------------------------------------------- | ------------------- |
| text | just text | string | - |
| maxLine | max count of lines allowed, ”null“ for no ellipsis | number | - |
| basedOn | "word" or "letter", the default value is based on text | string | - |
| ellipsis | the ellipsis indicator | ReactNode \| string | ... |
| action | the expend button | ReactNode \| string | more |
| trimEndPunc | remove any punctuation marks at the end of the text when ellipsis | boolean | true |
| onReflow | the callback func when the final state is determined | (clamped: boolean, displayedText: string) => void | - |
## Install
With yarn:
yarn add squirrel-ellipsis
With npm:
npm install --save squirrel-ellipsis
## Examples
[SquirrelEllipsis Example](https://github.com/Holybasil/squirrel-ellipsis/blob/main/site/src/components/Example.tsx)
## Development
For dependencies,
```sh
yarn run bootstrap
```
Then
```sh
yarn run start
cd site
yarn run dev
```