@@ -12,20 +12,35 @@ Simple [React](http://facebook.github.io/react/) component acting as a thin laye
1212
1313## Installation
1414
15+ ### NPM
16+
17+ ``` bash
18+ npm install react-youtube
19+ ```
20+
21+ ### Yarn
22+
1523``` bash
16- $ npm install react-youtube
24+ yarn add react-youtube
25+ ```
26+
27+ ### PNPM
28+
29+ ``` bash
30+ pnpm add react-youtube
1731```
1832
1933## Usage
2034
2135``` js
2236< YouTube
23- videoId= {string} // defaults -> null
24- id= {string} // defaults -> null
25- className= {string} // defaults -> null
37+ videoId= {string} // defaults -> ''
38+ id= {string} // defaults -> ''
39+ className= {string} // defaults -> ''
2640 containerClassName= {string} // defaults -> ''
27- containerStyle= {object} // defaults -> null
28- title= {string} // defaults -> null
41+ containerStyle= {object} // defaults -> {}
42+ title= {string} // defaults -> ''
43+ loading= {string} // defaults -> undefined
2944 opts= {obj} // defaults -> {}
3045 onReady= {func} // defaults -> noop
3146 onPlay= {func} // defaults -> noop
@@ -43,7 +58,8 @@ For convenience it is also possible to access the PlayerState constants through
4358
4459## Example
4560
46- ``` js
61+ ``` jsx
62+ // js
4763import React from ' react' ;
4864import YouTube from ' react-youtube' ;
4965
@@ -68,6 +84,30 @@ class Example extends React.Component {
6884}
6985```
7086
87+ ``` tsx
88+ // ts
89+ import React from ' react' ;
90+ import YouTube , { YouTubeProps } from ' react-youtube' ;
91+
92+ function Example() {
93+ const onPlayerReady: YouTubeProps [' onReady' ] = (event ) => {
94+ // access to player in all event handlers via event.target
95+ event .target .pauseVideo ();
96+ }
97+
98+ const opts: YouTubeProps [' opts' ] = {
99+ height: ' 390' ,
100+ width: ' 640' ,
101+ playerVars: {
102+ // https://developers.google.com/youtube/player_parameters
103+ autoplay: 1 ,
104+ },
105+ };
106+
107+ return <YouTube videoId = " 2g811Eo7K8U" opts = { opts } onReady = { onPlayerReady } />;
108+ }
109+ ```
110+
71111## Controlling the player
72112
73113You can access & control the player in a way similar to the [ official api] ( https://developers.google.com/youtube/iframe_api_reference#Events ) :
0 commit comments