React Shorten

Quickstart |
Examples |
Demo |
Native Demo

$3

- Base ReadMore component that can be used both in React DOM (Web) and in React Native to truncate text (it also allows showing more or less text).
- Component ReadMoreWeb that can be used directly in react-dom, only requiring the length to truncate and the text itself, removing the need to handle the expanded state of the base component.
- The truncation is based on the number of characters and allows limiting React components children length (string), even if the top children are not a string (this allows, for example, the input "text" to be a react code instead of requiring it to be a plain string).

---

IMPORTANT

The truncation is done traversing the children of the ReadMore component from top to bottom, from start to end, traversing the children of those components until reaching the leaves, that can be either strings or components without children.

This means that the text can be scattered across several components, but must be in the children property of those components (and not in a custom property like text or something else).

All descendants that generate text to be displayed should be able to be reached traversing only the children props of the descendants of the ReadMore component.

The descendants of the ReadMore component can have other props other than children as long as they don't display text.

---

$3

npm install react-shorten

$3

The next examples will use the following styled ReadMore web component:

``tsx
import { ReadMoreWeb } from 'react-shorten';
import React from 'react';

const StyledReadMore: React.FC<{
truncate?: number;
children: React.ReactNode;
}> = ({ truncate, children }) => (
truncate={truncate}
showMoreText="Show more"
showLessText="Show less"
className="read-more-btn"
>
{children}

);
`

and the following css:

`css
.read-more-btn {
display: inline;
padding: 0;
margin: 0;
font-size: 1rem;
color: rgb(80, 154, 223);
background: none;
border: none;
cursor: pointer;
}

.link {
color: rgb(26, 210, 243);
}
`

- Small Text: when the text has less characters than the limit required to truncate, the entire text is shown.

`tsx
const SmallText = () => (
Lorem ipsum dolor sit amet.
);
`

- Large Text: when the text has more characters than the limit required to truncate, the text is truncated, showing an ellipsis after where it was truncated (this is defined in the ReadMoreWeb component, but can be done differently if using the ReadMore base component directly), and a Show more button styled as a text that expands the text when clicked. After the text is expanded, it shows a Show less button to collapse the text again.

`tsx
const LargeText = () => (

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
ullamcorper, odio eu aliquam ultricies, enim sapien aliquet arcu, quis
aliquam diam massa eu nisl. Sed vitae nunc eget nunc ullamcorper
aliquet. Sed euismod, nisl eget aliquam ultricies, justo nisl aliquet
nunc, quis aliquam diam massa eu nisl. Sed vitae nunc eget nunc
ullamcorper aliquet. Sed euismod, nisl eget aliquam ultricies, justo
nisl aliquet nunc, quis aliquam diam massa eu nisl. Sed vitae nunc eget
nunc ullamcorper aliquet. Sed euismod, nisl eget aliquam ultricies,
justo nisl aliquet nunc, quis aliquam diam massa eu nisl. Sed vitae nunc
eget nunc ullamcorper aliquet. Sed euismod, nisl eget aliquam ultricies,
justo nisl aliquet nunc, quis aliquam diam massa eu nisl. Sed vitae nunc
eget nunc ullamcorper aliquet. Sed euismod, nisl eget aliquam ultricies,
justo nisl aliquet nunc, quis aliquam diam massa eu nisl. Sed vitae nunc
eget nunc ullamcorper aliquet. Sed euismod, nisl eget aliquam ultricies,
justo nisl aliquet nunc, quis aliquam diam massa eu nisl. Sed vitae nunc
eget nunc ullamcorper aliquet. Sed euismod, nisl eget aliquam ultricies,
justo nisl aliquet nunc, quis aliquam diam massa eu nisl. Sed vitae nunc
eget nunc ullamcorper aliquet. Sed euismod, nisl eget aliquam ultricies,
justo nisl aliquet nunc, quis aliquam diam massa eu nisl. Sed vitae nunc
eget nunc ullamcorper aliquet. Sed euismod, nisl eget aliquam ultricies,
justo nisl aliquet nunc, quis aliquam diam massa eu nisl.

);
`

- Text with HTML (pure react code): when the text has HTML, the printed text is truncated correctly at the point in which it would exceed the limit defined, even if it's not a direct child of the ReadMore component (as long as the entire text can be reached through the children property of the descendants of the ReadMore component).

`tsx
const HtmlText = () => (

Lorem ipsum dolor sit amet,{' '}


consectetur adipiscing elit. Sed ullamcorper, odio eu aliquam
ultricies, enim sapien aliquet arcu, quis aliquam diam massa eu
nisl. Sed vitae nunc eget nunc ullamcorper aliquet.

{' '}
Sed euismod, nisl eget aliquam ultricies, justo nisl aliquet nunc, quis
aliquam diam massa eu nisl. Sed vitae nunc eget nunc ullamcorper
aliquet.

);
`

- Text with links (pure react code): when the text has a link (anchor), it will work the same way as any other HTML defined as the text/children to be truncated (it's a specific case of the previous example).

`tsx
const LinkText = () => (

Lorem ipsum dolor sit amet,{' '}

consectetur adipiscing elit. Sed ullamcorper, odio eu aliquam
ultricies, enim sapien aliquet arcu, quis aliquam diam massa eu
nisl. Sed vitae nunc eget nunc ullamcorper aliquet.
{' '}
Sed euismod, nisl eget aliquam ultricies, justo nisl aliquet nunc, quis
aliquam diam massa eu nisl. Sed vitae nunc eget nunc ullamcorper
aliquet.

);
`

$3

You can create a custom web component, instead of using the one provided by this library, if you want more customization.

You only need to make sure to handle the expanded state (this can be done in a simple useState) and (optionally, but recommended) buttons to show more and less content.

The following code is the implementation of the ReadMoreWeb component of this library. It can be used as a reference when implementing a custom component:

`tsx
import { ReadMore } from 'react-shorten';
import React, { CSSProperties } from 'react';

export interface ReadMoreWebProps {
truncate: number | undefined;
showMoreText?: React.ReactNode;
showLessText?: React.ReactNode;
className?: string;
style?: CSSProperties;
children: React.ReactNode;
}

export const ReadMoreWeb: React.FC = ({
truncate,
showMoreText,
showLessText,
className,
style,
children,
}) => {
const [expanded, setExpanded] = React.useState(false);

const onShowMore = React.useCallback(() => setExpanded(true), []);

const onShowLess = React.useCallback(() => setExpanded(false), []);

return (
truncate={truncate}
expanded={expanded}
showMore={
<>
{'... '}
onClick={onShowMore}
className={className}
style={style}
>
{showMoreText ?? 'Show more'}


}
showLess={
<>
{' '}
onClick={onShowLess}
className={className}
style={style}
>
{showLessText ?? 'Show less'}


}
>
{children}

);
};

export default ReadMoreWeb;
`

$3

This library does not provides a native component (so as to not have react-native as a dependency), but it can be easily created just like the web/html example above, just changing the buttons to native components like Pressable (or even Text) with onPress or another press/tap event handler of your preference.

The following code is the implementation of the ReadMoreNative component in the react-native demo. It can be used as a reference when implementing a native component:

`tsx
import React from 'react';
import { ReadMore } from 'react-shorten';
import type { StyleProp, TextStyle } from 'react-native';
import { Text } from 'react-native';

interface ReadMoreNativeProps {
truncate: number | undefined;
showMoreText?: React.ReactNode;
showLessText?: React.ReactNode;
style?: StyleProp;
btnStyle?: StyleProp;
children: React.ReactNode;
}

const ReadMoreNative: React.FC = ({
truncate,
showMoreText,
showLessText,
style,
btnStyle,
children,
}) => {
const [expanded, setExpanded] = React.useState(false);

const onShowMore = React.useCallback(() => setExpanded(true), []);

const onShowLess = React.useCallback(() => setExpanded(false), []);

return (
truncate={truncate}
expanded={expanded}
showMore={

{'... '}

{showMoreText ?? 'Show more'}


}
showLess={

{' '}

{showLessText ?? 'Show less'}


}
>
{children}

);
};

export default ReadMoreNative;
`

$3

You can define the text to show after a truncated text inside the last tag (instead of outside it) with the endTruncate property.

For example, if the truncated text ends with a link, and you define endTruncate="...", the truncated link will end with ... as part of the link, instead of outside it.

See section Truncated text with content inside the last tag` in the demo.

$3

You can see a live web (react-dom) demo here and a react-native demo here.