Skip to content

Commit 0dd1160

Browse files
authored
feat: export YouTubeProps type and improve docs (#338)
1 parent 7f63395 commit 0dd1160

2 files changed

Lines changed: 48 additions & 8 deletions

File tree

README.md

Lines changed: 47 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -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
4763
import React from 'react';
4864
import 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

73113
You can access & control the player in a way similar to the [official api](https://developers.google.com/youtube/iframe_api_reference#Events):

src/YouTube.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ function shouldUpdatePlayer(prevProps: YouTubeProps, props: YouTubeProps) {
6565
);
6666
}
6767

68-
type YouTubeProps = {
68+
export type YouTubeProps = {
6969
/**
7070
* The YouTube video ID.
7171
*

0 commit comments

Comments
 (0)