Ellipsis
Basic usage
tsx
import { Box } from '@semcore/base-components';
import Ellipsis from '@semcore/ellipsis';
import Link from '@semcore/link';
import React from 'react';
const Demo = () => {
return (
<Box w={220}>
<Link inline href='https://developer.semrush.com/@semcore/ui/components/ellipsis/ellipsis'>
<Link.Text tag={Ellipsis}>
https://developer.semrush.com/@semcore/ui/components/ellipsis/ellipsis
</Link.Text>
</Link>
</Box>
);
};
export default Demo;
Trimming type
It's possible to truncate the middle of the text string.
tsx
import { Box } from '@semcore/base-components';
import Ellipsis from '@semcore/ellipsis';
import React from 'react';
const Demo = () => {
return (
<Box w={120}>
<Ellipsis trim='middle'>Page with a very long URL</Ellipsis>
</Box>
);
};
export default Demo;
Multiline
It's possible to specify after what text line apply truncating
tsx
import Card from '@semcore/card';
import Ellipsis from '@semcore/ellipsis';
import { Text } from '@semcore/typography';
import React from 'react';
const Demo = () => {
return (
<Card w={220}>
<Card.Header>
<Card.Title tag='h4' inline my={0} size={300}>
Card heading
</Card.Title>
<Card.Description tag='div' size={200}>
<Ellipsis maxLine={1}>Additional long card description</Ellipsis>
</Card.Description>
</Card.Header>
<Card.Body>
<Text size={300}>Card content</Text>
</Card.Body>
</Card>
);
};
export default Demo;
Multiple use
in case of multiple use of a component for optimization you can use one observer for all components
tsx
import { DataTable } from '@semcore/data-table';
import Ellipsis, { useResizeObserver } from '@semcore/ellipsis';
import React from 'react';
const Demo = () => {
const containerRef = React.useRef(null);
const containerRect = useResizeObserver(containerRef);
return (
<DataTable
data={data}
aria-label='Table title'
columns={[
{ name: 'keyword', children: 'Keyword' },
{ name: 'kd', children: 'KD,%' },
{ name: 'cpc', children: 'CPC' },
{ name: 'vol', children: 'Vol.', gtcWidth: '100px', ref: containerRef },
]}
renderCell={(props) => {
if (props.columnName === 'vol') {
return (
<Ellipsis trim='middle' containerRect={containerRect} containerRef={containerRef}>
{props.value}
</Ellipsis>
);
}
return props.defaultRender();
}}
/>
);
};
const data = [
{
keyword: 'ebay buy',
kd: '77.8',
cpc: '$1.25',
vol: '32,500,000,500,00032,500,000,500,00032,500,000,500,000',
},
{
keyword: 'www.ebay.com',
kd: '11.2',
cpc: '$3.4',
vol: '65,457,920,000,50032,500,000,500,00032,500,000,500,000',
},
{
keyword: 'www.ebay.com',
kd: '10',
cpc: '$0.65',
vol: '47,354,640,000,50032,500,000,500,00032,500,000,500,00032,500,000,500,000',
},
{
keyword: 'ebay buy',
kd: '-',
cpc: '$0',
vol: 'n/a',
},
{
keyword: 'ebay buy',
kd: '75.89',
cpc: '$0',
vol: '21,644,290,000,500',
},
];
export default Demo;
Advanced use
For more control over the container and tooltip, you can use the Ellipsis.Content
and Ellipsis.Popper
components.
tsx
import { Box } from '@semcore/base-components';
import Ellipsis from '@semcore/ellipsis';
import React from 'react';
const Demo = () => {
return (
<Box>
<Ellipsis trim='middle'>
<Ellipsis.Content w={300}>
Intergalactic, planetary, planetary, intergalactic Intergalactic, planetary, planetary,
intergalactic Intergalactic, planetary, planetary, intergalactic Intergalactic, planetary,
planetary, intergalactic Another dimension, another dimension
</Ellipsis.Content>
<Ellipsis.Popper w={500} wMax={500} />
</Ellipsis>
</Box>
);
};
export default Demo;
Cursor anchoring
If tooltip size is smaller than the container, you can anchor tooltip position to the cursor.
tsx
import { Box } from '@semcore/base-components';
import Ellipsis from '@semcore/ellipsis';
import React from 'react';
const Demo = () => {
return (
<Box>
<Ellipsis trim='middle' cursorAnchoring>
<Ellipsis.Content w={500}>
Intergalactic, planetary, planetary, intergalactic Intergalactic, planetary, planetary,
intergalactic Intergalactic, planetary, planetary, intergalactic Intergalactic, planetary,
planetary, intergalactic Another dimension, another dimension
</Ellipsis.Content>
<Ellipsis.Popper w={400} wMax={500} />
</Ellipsis>
</Box>
);
};
export default Demo;