Basic usage

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.

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

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

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.

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.

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;