Basic usage

import { Box } from '@semcore/ui/base-components';
import type { EllipsisProps } from '@semcore/ui/ellipsis';
import Ellipsis from '@semcore/ui/ellipsis';
import Link from '@semcore/ui/link';
import React from 'react';

const Demo = (props: EllipsisProps) => {
  return (
    <Box w={220}>
      <Link
        inline
        href='https://developer.semrush.com/intergalactic/components/ellipsis/ellipsis'
      >
        <Link.Text
          tag={Ellipsis}
          trim={props.trim}
          tooltip={props.tooltip}
          maxLine={props.maxLine}
        >
          https://developer.semrush.com/intergalactic/components/ellipsis/ellipsis
        </Link.Text>
      </Link>
    </Box>
  );
};

export const defaultProps: EllipsisProps = {
  trim: undefined,
  tooltip: undefined,
  maxLine: undefined,
};

Demo.defaultProps = defaultProps;

export default Demo;

Trimming type

It's possible to truncate the middle of the text string.

import { Box } from '@semcore/ui/base-components';
import Ellipsis from '@semcore/ui/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 which line apply truncating.

import Card from '@semcore/ui/card';
import type { EllipsisProps } from '@semcore/ui/ellipsis';
import Ellipsis from '@semcore/ui/ellipsis';
import { Text } from '@semcore/ui/typography';
import React from 'react';

const Demo = (props: EllipsisProps) => {
  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
            tag={Ellipsis}
            trim={props.trim}
            tooltip={props.tooltip}
            maxLine={props.maxLine}
          >
            Additional long card description with a lot of details about the widget
          </Ellipsis>
        </Card.Description>
      </Card.Header>
      <Card.Body>
        <Text size={300}>Card content</Text>
      </Card.Body>
    </Card>
  );
};

export const defaultProps: EllipsisProps = {
  trim: undefined,
  tooltip: undefined,
  maxLine: 2,
};

Demo.defaultProps = defaultProps;

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/ui/data-table';
import Ellipsis, { useResizeObserver } from '@semcore/ui/ellipsis';
import type { EllipsisProps } from '@semcore/ui/ellipsis';
import React from 'react';

const Demo = (propsEllipsis: EllipsisProps) => {
  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={propsEllipsis.trim} containerRect={containerRect} containerRef={containerRef}>
              {props.value}
            </Ellipsis>
          );
        }

        return props.defaultRender();
      }}
    />
  );
};

export const defaultProps: EllipsisProps = {
  trim: 'middle',
};

Demo.defaultProps = defaultProps;

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/ui/base-components';
import Ellipsis from '@semcore/ui/ellipsis';
import type { EllipsisProps } from '@semcore/ui/ellipsis';
import React from 'react';

const Demo = (props: EllipsisProps) => {
  return (
    <Box>
      <Ellipsis trim={props.trim} tooltip={props.tooltip} maxLine={props.maxLine}>
        <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 const defaultProps: EllipsisProps = {
  trim: 'middle',
  tooltip: undefined,
  maxLine: undefined,
};

Demo.defaultProps = defaultProps;

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/ui/base-components';
import Ellipsis from '@semcore/ui/ellipsis';
import type { EllipsisProps } from '@semcore/ui/ellipsis';
import React from 'react';

const Demo = (props: EllipsisProps) => {
  return (
    <Box>
      <Ellipsis trim={props.trim} 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 const defaultProps: EllipsisProps = {
  trim: 'middle',
};

Demo.defaultProps = defaultProps;

export default Demo;