React Truncate JSX

You want to ellipsisify some text in your React app but it's encapsulated in a React component.

CodeSandBox DEMO

Installation

npm install react-truncate-jsx

// or 

yarn add react-truncate-jsx

Usage

import React, {forwardRef} from 'react';
import Truncate, {TruncateList} from 'react-truncate-jsx';

const tags = ['Orange', 'Apple', 'Pear', 'Lemon', 'Watermelon'];


const Ellipsis = forwardRef(
    ({moreCount, moreChildren, ...props}, ref) => {
        return (
            <div ref={ref} style={{ flexShrink: 0 }} {...props}>
                +{moreCount} tags
            </div>
        );
    }
);

const App = () => (
    <div style={{width:200}}>
        <Truncate>
            <div
                style={{
                    display: 'flex',
                    flexWrap: 'wrap'
                }}
            >
                <TruncateList ellipsis={Ellipsis}>
                    {tags.map((t) => (
                        <div
                            key={t}
                            style={{
                                padding: '3px 5px',
                                background: '#bababa',
                                flexShrink: 0,
                                marginRight: 5,
                            }}
                        >
                            {t}
                        </div>
                    ))}
                </TruncateList>
            </div>
        </Truncate>
    </div>
)

Prop types

Truncate

props	default	type
isTruncating	true	boolean

TruncateList

props	default	type	description
ellipsis	...	render prop	see props bellow

Ellipsis

props	default	type
moreCount		number
moreChildren		Array of truncated children