React component implementation
Read the relevant core contract, nearest React component and tests, public exports, and UI design record before choosing a pattern. Use packages/react/src/ui/play-button/ for a simple control and packages/react/src/ui/slider/ for a compound control.
Workflow
- Classify the request as a reusable primitive or app/skin composition before defining its contract. Then define the state owner, semantics, APIs, optional parts, styling contract, and opt-outs.
- Put runtime-neutral state and actions in
packages/core/src/core/ui/; put reusable DOM interaction in packages/core/src/dom/ui/; subscribe to the narrowest player state in React.
- Reuse
createMediaButton when its contract fits. Otherwise use UIComponentProps and renderElement so DOM props, event handlers, state callbacks, and refs compose correctly.
- Let React own rendered DOM updates: express them through props, state, context, and render output. Reserve refs for browser imperatives such as focus or measurement; avoid mutating React-owned nodes so debugging, tests, hydration, and integrations remain authoritative.
- Add a compound part only for a semantic, focusable, placeable, omittable, or replaceable node. Keep context values narrow and scoped to the owning root; do not mirror derived state through effects. If the API starts coordinating independent behavior, extract another component or hook instead of adding modes and options.
- Expose discrete state through mapped
data-* attributes and dynamic layout values through stable CSS custom properties. Leave visual defaults to skins and CSS. Treat descendant selectors, :has(), and other complex selectors introduced by composition as a likely sign that the primitive boundary or styling hooks need improvement.
- Preserve the default semantic element while allowing deliberate replacement through
render. Ensure omitted parts and unsupported features do not leave hidden behavior or required markup behind.
- Export compound APIs as tree-shakeable ESM namespaces with
export * as Name from './index.parts'; keep parts as direct re-exports and do not assemble a runtime namespace object. When a compound specializes another compound, re-export unchanged base parts under the specialized namespace and create a specialized part only when its behavior or defaults differ. Avoid pulling optional dependencies into unrelated imports. Add focused tests for rendered behavior, ref/prop composition, context boundaries, and customization.
Use packages/react/src/ui/create-media-button.tsx, packages/react/src/utils/use-render.tsx, and packages/react/src/ui/slider/index.parts.ts as implementation anchors. Check packages/react/package.json and packages/react/vite.config.ts when the public or bundle boundary changes.
Example
Input: “Create the React chapter-skip control.”
Output: A scoped core contract, composable React adapter, stable styling hooks, deliberate render escape hatch, exports, and focused tests.
1---2name: create-react-component3description: Create or change Video.js React UI components. Use for React component boundaries, state ownership, compound parts, render customization, styling hooks, exports, or client behavior.4---56# React component implementation78Read the relevant core contract, nearest React component and tests, public exports, and UI design record before choosing a pattern. Use `packages/react/src/ui/play-button/` for a simple control and `packages/react/src/ui/slider/` for a compound control.910## Workflow11121. Classify the request as a reusable primitive or app/skin composition before defining its contract. Then define the state owner, semantics, APIs, optional parts, styling contract, and opt-outs.132. Put runtime-neutral state and actions in `packages/core/src/core/ui/`; put reusable DOM interaction in `packages/core/src/dom/ui/`; subscribe to the narrowest player state in React.143. Reuse `createMediaButton` when its contract fits. Otherwise use `UIComponentProps` and `renderElement` so DOM props, event handlers, state callbacks, and refs compose correctly.154. Let React own rendered DOM updates: express them through props, state, context, and render output. Reserve refs for browser imperatives such as focus or measurement; avoid mutating React-owned nodes so debugging, tests, hydration, and integrations remain authoritative.165. Add a compound part only for a semantic, focusable, placeable, omittable, or replaceable node. Keep context values narrow and scoped to the owning root; do not mirror derived state through effects. If the API starts coordinating independent behavior, extract another component or hook instead of adding modes and options.176. Expose discrete state through mapped `data-*` attributes and dynamic layout values through stable CSS custom properties. Leave visual defaults to skins and CSS. Treat descendant selectors, `:has()`, and other complex selectors introduced by composition as a likely sign that the primitive boundary or styling hooks need improvement.187. Preserve the default semantic element while allowing deliberate replacement through `render`. Ensure omitted parts and unsupported features do not leave hidden behavior or required markup behind.198. Export compound APIs as tree-shakeable ESM namespaces with `export * as Name from './index.parts'`; keep parts as direct re-exports and do not assemble a runtime namespace object. When a compound specializes another compound, re-export unchanged base parts under the specialized namespace and create a specialized part only when its behavior or defaults differ. Avoid pulling optional dependencies into unrelated imports. Add focused tests for rendered behavior, ref/prop composition, context boundaries, and customization.2021Use `packages/react/src/ui/create-media-button.tsx`, `packages/react/src/utils/use-render.tsx`, and `packages/react/src/ui/slider/index.parts.ts` as implementation anchors. Check `packages/react/package.json` and `packages/react/vite.config.ts` when the public or bundle boundary changes.2223## Example2425Input: “Create the React chapter-skip control.”2627Output: A scoped core contract, composable React adapter, stable styling hooks, deliberate render escape hatch, exports, and focused tests.
videojs