Summary
The @videojs/react package needs a Video component that auto-attaches to the store context and utility hooks for common React patterns.
Requirements
Video Component
- Automatically attach the video element to the nearest store context on mount
- Support React 19 ref cleanup pattern for automatic detach
- Accept all standard video element props and children (source, track elements)
- Work with external refs
Utilities
useComposedRefs(...refs): Compose multiple refs into a single callback ref
composeRefs(...refs): Non-hook version for use outside components
Re-exports
For convenience, re-export from @videojs/store/react:
createStore, useStoreContext
useSelector, useRequest, useTasks
- Related types
Testing
- Set up vitest testing infrastructure for the package
- Add tests for Video component and useComposedRefs utility
Usage Example
import { createStore, Video } from '@videojs/react';
import { media } from '@videojs/core/dom';
const { Provider, useSelector, useRequest } = createStore({
slices: [media.playback],
});
function App() {
return (
<Provider>
<Video src="video.mp4" />
<Controls />
</Provider>
);
}
Summary
The
@videojs/reactpackage needs aVideocomponent that auto-attaches to the store context and utility hooks for common React patterns.Requirements
Video Component
Utilities
useComposedRefs(...refs): Compose multiple refs into a single callback refcomposeRefs(...refs): Non-hook version for use outside componentsRe-exports
For convenience, re-export from
@videojs/store/react:createStore,useStoreContextuseSelector,useRequest,useTasksTesting
Usage Example