Film and community

ExpandableText

Long text clamped to a few lines, with More to open the rest.

import { ExpandableText } from '@iffday/web/src/kit';

Example

Long text shows lines lines first, six by default, followed by More in red. When the text fits, More does not appear: the component measures the text once and again whenever its width changes. Opened, the link becomes Less.

The film opens on a move. The camera follows box after box down a stairwell, and the family never quite reaches the middle of the frame. Most of the dialogue happens off screen; we piece the household together from door frames, window frames and mirrors. The second act moves to a small hotel by the sea and slows right down: in one long take the mother makes the same bed three times. Several people left during this stretch. Those who stayed called it the gentlest part of the film. The last act returns to the city, the removal van drives off, and the empty flat keeps a single lamp on.

import { ExpandableText } from '@iffday/web/src/kit';
import { longText } from '../../../samples';

export default function Example() {
  return (
    <div style={{ width: 'min(100%, 520px)' }}>
      <ExpandableText lines={3}>
        <p>{longText}</p>
      </ExpandableText>
    </div>
  );
}

Props

ExpandableText

apps/web/src/kit.tsx:292

Clamp long text with record.club's inline MORE.

Prop	Type	Default
`children*`	`ReactNode`
`lines`	`number`	`6`
`className`	`string`	`''`