TypeScript types
Everything each entry point exports, values and types.
vidscroll is written in TypeScript and ships its types; there’s nothing extra to install. It has three entry points, and each exports only what it needs.
vidscroll (React)
| Export | Kind | What it is |
|---|---|---|
ScrollVideo, Section, ScrollFrames | components | The React components |
useScrollVideo, useScrollVideoState, useScrollVideoUpdate | hooks | See Hooks |
easing | value | The preset curves as functions, such as easing.inOutSine |
VidscrollError | class | Errors with a code; use with instanceof |
ScrollVideoProps, SectionProps, ScrollFramesProps | types | Component props |
ScrollVideoApi | type | The api from useScrollVideo |
ScrollVideoState | type | What useScrollVideoState returns |
ScrollVideoSnapshot | type | The state passed to useScrollVideoUpdate and events |
ScrollVideoEvents | type | Event names and their payloads |
LoaderState | type | The argument of a loader function |
EasingName | type | The preset names accepted by easing |
VidscrollErrorCode | type | “unsupported-url” | “http-error” | “not-a-video” | “unplayable” |
OptimizeOptions, SmoothScrollOptions, ScrollToOptions | types | Option objects |
SectionRange | type | A range for addSection |
LoadedVideo, VideoProbe | types | What onLoad describes: the source and the file’s measurements |
vidscroll/core
| Export | Kind | What it is |
|---|---|---|
createScrollVideo | function | Creates a controller. See vidscroll/core |
styles | value | The default CSS as a string |
easing, VidscrollError | value, class | As in the React entry |
ScrollVideoController | type | The controller |
ScrollVideoOptions | type | Options for createScrollVideo, update and setOptions |
ScrollVideoEventMap, ScrollVideoEvent | types | Event payloads (including loader) and event names |
LoaderState, EasingName, VidscrollErrorCode, ScrollVideoSnapshot, ScrollToOptions, SectionRange, OptimizeOptions, SmoothScrollOptions, LoadedVideo, VideoProbe | types | As in the React entry |
vidscroll/element
Importing this entry registers <vid-scroll> and <vid-scroll-section>, and
adds them to HTMLElementTagNameMap, so document.querySelector("vid-scroll")
is typed.
| Export | Kind | What it is |
|---|---|---|
VidScrollElement, VidScrollSectionElement | classes | The element classes |
VidScrollEventMap | type | The DOM events and their detail types |
LoaderState, ScrollVideoController, ScrollVideoOptions | types | As in the core entry |
Two naming details
- The React entry calls the event map
ScrollVideoEvents; the core entry calls itScrollVideoEventMapand includes theloaderevent, which the Reactapidoesn’t list. onLoadreceives{ source, probe }.sourceis"original","optimized","cache"or"stream".probedescribes the file (duration,width,height,frameCount,maxKeyframeGap) and isnullfor cached and streamed videos.
Related
- Controller API and events: methods and payloads in detail.