feat: export YouTubeProps type and improve docs (#338)

README.md

@@ -12,20 +12,35 @@ Simple [React](http://facebook.github.io/react/) component acting as a thin laye
 
 ## Installation
 
+### NPM
+
+```bash
+npm install react-youtube
+```
+
+### Yarn
+
 ```bash
-$ npm install react-youtube
+yarn add react-youtube
+```
+
+### PNPM
+
+```bash
+pnpm add react-youtube
 ```
 
 ## Usage
 
 ```js
 <YouTube
-  videoId={string}                  // defaults -> null
-  id={string}                       // defaults -> null
-  className={string}                // defaults -> null
+  videoId={string}                  // defaults -> ''
+  id={string}                       // defaults -> ''
+  className={string}                // defaults -> ''
   containerClassName={string}       // defaults -> ''
-  containerStyle={object}           // defaults -> null
-  title={string}                    // defaults -> null
+  containerStyle={object}           // defaults -> {}
+  title={string}                    // defaults -> ''
+  loading={string}                  // defaults -> undefined
   opts={obj}                        // defaults -> {}
   onReady={func}                    // defaults -> noop
   onPlay={func}                     // defaults -> noop
@@ -43,7 +58,8 @@ For convenience it is also possible to access the PlayerState constants through
 
 ## Example
 
-```js
+```jsx
+// js
 import React from 'react';
 import YouTube from 'react-youtube';
 
@@ -68,6 +84,30 @@ class Example extends React.Component {
 }
 ```
 
+```tsx
+// ts
+import React from 'react';
+import YouTube, { YouTubeProps } from 'react-youtube';
+
+function Example() {
+  const onPlayerReady: YouTubeProps['onReady'] = (event) => {
+    // access to player in all event handlers via event.target
+    event.target.pauseVideo();
+  }
+
+  const opts: YouTubeProps['opts'] = {
+    height: '390',
+    width: '640',
+    playerVars: {
+      // https://developers.google.com/youtube/player_parameters
+      autoplay: 1,
+    },
+  };
+
+  return <YouTube videoId="2g811Eo7K8U" opts={opts} onReady={onPlayerReady} />;
+}
+```
+
 ## Controlling the player
 
 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

@@ -65,7 +65,7 @@ function shouldUpdatePlayer(prevProps: YouTubeProps, props: YouTubeProps) {
   );
 }
 
-type YouTubeProps = {
+export type YouTubeProps = {
   /**
    * The YouTube video ID.
    *