# Buffer

Buffered and seekable time range state for the player store

Tracks buffered and seekable time ranges. Each range is a `[start, end]` pair rather than a browser `TimeRanges` object.

During live playback, `seekable` tells you which times remain available. The first start is the oldest available time, and the last end is the newest. Both values can move forward as a sliding live stream drops older video and adds new video. See [live state](https://videojs.org/docs/framework/react/reference/api/feature-live) for the live-edge values.

## Import

```tsx
import { bufferFeature } from '@videojs/react';
```

The `audioFeatures`, `liveAudioFeatures`, `liveVideoFeatures`, and `videoFeatures` [feature bundles](https://videojs.org/docs/framework/react/guides/presets) include this feature.

## API Reference

### State

| Property | Type | Description |
| --- | --- | --- |
| `buffered` | `[number, number][]` | Buffered time ranges as \[start, end\] tuples. |
| `seekable` | `[number, number][]` | Seekable time ranges as \[start, end\] tuples. |

### Selector

Pass `selectBuffer` to [`usePlayer`](https://videojs.org/docs/framework/react/reference/api/use-player) to subscribe to buffer state. Returns `undefined` if the buffer feature is not configured.

**BufferedRanges.tsx**

```tsx
import { selectBuffer, usePlayer } from '@videojs/react';

function BufferedRanges() {
  const buffer = usePlayer(selectBuffer);
  if (!buffer) return null;

  return (
    <ul>
      {buffer.buffered.map(([start, end]) => (
        <li key={`${start}-${end}`}>{start.toFixed(1)}–{end.toFixed(1)} seconds</li>
      ))}
    </ul>
  );
}
```

---

React documentation: https://videojs.org/docs/framework/react/llms.txt
All documentation: https://videojs.org/llms.txt