VirtualizedList

import { VirtualizedList } from '@bindshq/stance-react';

const events = Array.from({ length: 5000 }, (_, i) => ({
  id: `e${i}`,
  text: `Signature deployed to mailbox ${String(i + 1).padStart(4, '0')}@binds.si`,
}));

export function Basic() {
  return (
    <VirtualizedList
      aria-label="Deployment log"
      items={events}
      itemHeight={40}
      height={280}
      getItemKey={(e) => e.id}
      renderItem={(e) => e.text}
    />
  );
}

import * as React from 'react';
import { VirtualizedList } from '@bindshq/stance-react';

const people = [
  'Priya Nair',
  'Amara Okafor',
  'Lukas Brenner',
  'Hana Sato',
  'Tomás Ruiz',
  'Owen Price',
  'Zainab Haddad',
  'Mateja Kovač',
];

const recipients = Array.from({ length: 2000 }, (_, i) => ({
  id: `r${i}`,
  name: `${people[i % 8]} (${i + 1})`,
}));

export function Listbox() {
  const [selected, setSelected] = React.useState<React.Key | null>(null);
  return (
    <div style={{ display: 'grid', gap: 8 }}>
      <VirtualizedList
        role="listbox"
        aria-label="Choose a recipient"
        items={recipients}
        itemHeight={40}
        height={240}
        getItemKey={(r) => r.id}
        selectedKey={selected}
        onSelectionChange={setSelected}
        renderItem={(r) => r.name}
      />
      <p style={{ margin: 0 }}>
        Selected: {selected ? recipients.find((r) => r.id === selected)?.name : 'none'}
      </p>
    </div>
  );
}

import { Avatar, VirtualizedList } from '@bindshq/stance-react';

const people = [
  'Priya Nair',
  'Amara Okafor',
  'Lukas Brenner',
  'Hana Sato',
  'Tomás Ruiz',
  'Owen Price',
  'Zainab Haddad',
  'Mateja Kovač',
];

export function MeasuredHeights() {
  const notes = Array.from({ length: 300 }, (_, i) => ({
    id: `n${i}`,
    name: people[i % 8]!,
    note:
      i % 3 === 0
        ? 'Updated the legal disclaimer on the Sales template and requested a review from Legal before Friday’s rollout.'
        : 'Approved the signature.',
  }));
  return (
    <VirtualizedList
      aria-label="Review notes"
      items={notes}
      height={300}
      estimatedItemHeight={64}
      getItemKey={(n) => n.id}
      renderItem={(n) => (
        <div style={{ display: 'flex', gap: 12, padding: '12px 0', alignItems: 'flex-start' }}>
          <Avatar name={n.name} size="sm" />
          <div>
            <strong>{n.name}</strong>
            <p style={{ margin: '2px 0 0' }}>{n.note}</p>
          </div>
        </div>
      )}
    />
  );
}

import * as React from 'react';
import { Button, VirtualizedList } from '@bindshq/stance-react';
import type { VirtualizedListHandle } from '@bindshq/stance-react';

const events = Array.from({ length: 5000 }, (_, i) => ({
  id: `e${i}`,
  text: `Signature deployed to mailbox ${String(i + 1).padStart(4, '0')}@binds.si`,
}));

export function ScrollToIndex() {
  const api = React.useRef<VirtualizedListHandle>(null);
  return (
    <div style={{ display: 'grid', gap: 12 }}>
      <div style={{ display: 'flex', gap: 8 }}>
        <Button size="sm" variant="outline" onClick={() => api.current?.scrollToIndex(0, 'start')}>
          First
        </Button>
        <Button
          size="sm"
          variant="outline"
          onClick={() => api.current?.scrollToIndex(2499, 'center')}
        >
          Middle
        </Button>
        <Button size="sm" variant="outline" onClick={() => api.current?.scrollToIndex(4999, 'end')}>
          Last
        </Button>
      </div>
      <VirtualizedList
        aria-label="Deployment log"
        items={events}
        itemHeight={40}
        height={240}
        apiRef={api}
        renderItem={(e) => e.text}
      />
    </div>
  );
}