@videojs/react 10.0.0-beta.26 → 10.0.0-beta.27

package/docs/concepts/ui-components.md

@@ -8,11 +8,11 @@ Every UI component renders exactly one HTML element, taking inspiration from pro
 
 ## Where to put your components
 
-UI Components can go anywhere inside a [`<Player.Provider>`](../reference/player-provider.md).
+UI Components can go anywhere inside a [`<Player>`](../reference/player-provider.md).
 
-However, you should consider placing your components in `<Player.Container>`. Components in `<Player.Container>` will go fullscreen with the player, respond to user activity, and more.
+However, you should consider placing your components in `<Container>`. Components in `<Container>` will go fullscreen with the player, respond to user activity, and more.
 
-[Read more about `<Player.Container>`](../reference/player-container.md)
+[Read more about `<Container>`](../reference/player-container.md)
 
 ## Styling and customization
 

package/docs/concepts/why-videojs.md

@@ -55,7 +55,7 @@ tsx
 ```
 import { createPlayer, playbackFeature, timeFeature } from '@videojs/react';
 
-const Player = createPlayer({
+const { Player } = createPlayer({
   features: [playbackFeature, timeFeature],
 });
 ```
@@ -77,15 +77,15 @@ React
 HTML
 
 ```
-import { Player, Video, VideoSkin } from '@videojs/react/video';
+import { VideoPlayer, Video, VideoSkin } from '@videojs/react/video';
 
 function MyPlayer() {
   return (
-    <Player.Provider>
+    <VideoPlayer>
       <VideoSkin>
         <Video src="movie.mp4" />
       </VideoSkin>
-    </Player.Provider>
+    </VideoPlayer>
   );
 }
 ```

package/docs/how-to/build-your-own-component.md

@@ -73,19 +73,21 @@ store.seek(30);
 
 ## Place your component in the player
 
-Your component needs to be inside [`<Player.Provider>`](../reference/player-provider.md) to access state. Place it inside [`<Player.Container>`](../reference/player-container.md) if it should also participate in fullscreen and respond to user activity:
+Your component needs to be inside [`<Player>`](../reference/player-provider.md) to access state. Place it inside [`<Container>`](../reference/player-container.md) if it should also participate in fullscreen and respond to user activity:
 
 tsx
 
 ```
-<Player.Provider>
-  <Player.Container>
+import { Container } from '@videojs/react';
+
+<Player>
+  <Container>
     <VideoSkin>
       <Video src="video.mp4" />
     </VideoSkin>
     <SkipIntroButton />
-  </Player.Container>
-</Player.Provider>
+  </Container>
+</Player>
 ```
 
 ## Make it accessible