Skip to content

Commit 210efab

Browse files
tjallingttjallingt
authored
Merge pull request #336 from tjallingt/canary
chore: release
2 parents b2559da + 0dd1160 commit 210efab

14 files changed

Lines changed: 1633 additions & 5922 deletions

‎.babelrc‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎.eslintignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
node_modules
22
dist
3+
.cache
4+
.parcel-cache

‎.eslintrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"extends": ["react-app", "plugin:prettier/recommended", "prettier"],
2+
"extends": ["react-app", "plugin:prettier/recommended"],
33
"env": {
44
"browser": true,
55
"jest": true

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ dist
44
es
55
.vscode/*
66
.cache/*
7+
.parcel-cache/*
78
build/*

‎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):

example/example.js renamed to example/example.jsx

File renamed without changes.

‎example/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66
</head>
77
<body>
88
<div id="root"></div>
9-
<script src="./example.js"></script>
9+
<script type="module" src="example.jsx"></script>
1010
</body>
1111
</html>

‎index.d.ts‎

Lines changed: 0 additions & 65 deletions
This file was deleted.

‎package.json‎

Lines changed: 22 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,17 @@
22
"name": "react-youtube",
33
"version": "1.0.0-semantic-release",
44
"description": "React.js powered YouTube player component",
5-
"main": "dist/index.js",
6-
"module": "dist/index.esm.js",
7-
"types": "index.d.ts",
5+
"main": "dist/YouTube.js",
6+
"module": "dist/YouTube.mjs",
7+
"types": "dist/YouTube.d.ts",
8+
"targets": {
9+
"main": false,
10+
"module": false,
11+
"types": false
12+
},
13+
"sideEffects": false,
814
"files": [
9-
"dist",
10-
"index.d.ts"
15+
"dist/**"
1116
],
1217
"repository": {
1318
"type": "git",
@@ -31,40 +36,30 @@
3136
"youtube-player": "5.5.2"
3237
},
3338
"devDependencies": {
34-
"@babel/cli": "7.17.6",
35-
"@babel/core": "7.17.9",
36-
"@babel/plugin-proposal-class-properties": "7.16.7",
37-
"@babel/preset-env": "7.16.11",
38-
"@babel/preset-react": "7.16.7",
3939
"@commitlint/cli": "16.2.3",
4040
"@commitlint/config-conventional": "16.2.1",
4141
"@testing-library/jest-dom": "5.16.4",
4242
"@testing-library/react": "12.1.4",
43+
"@types/jest": "27.4.1",
4344
"@types/youtube-player": "5.5.6",
44-
"babel-eslint": "10.1.0",
45-
"babel-jest": "27.5.1",
46-
"babel-loader": "8.2.4",
4745
"commitizen": "4.2.4",
4846
"cross-env": "7.0.3",
4947
"cz-conventional-changelog": "3.3.0",
5048
"eslint": "8.13.0",
5149
"eslint-config-prettier": "8.5.0",
5250
"eslint-config-react-app": "7.0.0",
53-
"eslint-plugin-flowtype": "8.0.3",
54-
"eslint-plugin-import": "2.26.0",
55-
"eslint-plugin-jsx-a11y": "6.5.1",
5651
"eslint-plugin-prettier": "4.0.0",
57-
"eslint-plugin-react": "7.29.4",
58-
"eslint-plugin-react-hooks": "4.4.0",
5952
"husky": "7.0.4",
6053
"jest": "27.5.1",
6154
"lint-staged": "12.3.7",
62-
"npm-run-all": "4.1.5",
63-
"parcel-bundler": "1.12.5",
55+
"parcel": "2.4.1",
6456
"prettier": "2.6.2",
57+
"process": "0.11.10",
6558
"react": "17.0.2",
6659
"react-dom": "17.0.2",
67-
"semantic-release": "19.0.2"
60+
"ts-jest": "27.1.4",
61+
"tsup": "5.12.4",
62+
"typescript": "4.6.3"
6863
},
6964
"peerDependencies": {
7065
"react": ">=0.14.1"
@@ -75,18 +70,16 @@
7570
"scripts": {
7671
"test": "jest",
7772
"test:ci": "jest --ci --runInBand",
78-
"compile:cjs": "babel src/YouTube.js --out-file dist/index.js",
79-
"compile:es": "cross-env BABEL_ENV=es babel src/YouTube.js --out-file dist/index.esm.js",
80-
"compile": "npm-run-all --parallel compile:*",
73+
"compile": "tsup src/YouTube.tsx --format esm,cjs --dts --external react",
8174
"prepublishOnly": "npm run compile",
82-
"lint": "eslint src example",
75+
"lint": "eslint src example --ext .ts,.tsx,.js,.jsx",
8376
"example": "parcel example/index.html --public-url /react-youtube/ --open",
84-
"example:build": "parcel build example/index.html --public-url /react-youtube/ --out-dir build",
77+
"example:build": "parcel build example/index.html --public-url /react-youtube/ --dist-dir build",
8578
"commit": "git-cz",
8679
"prepare": "husky install"
8780
},
8881
"lint-staged": {
89-
"*.js": "eslint --fix",
82+
"*.js": "eslint --ext .ts,.tsx,.js,.jsx --fix",
9083
"*.{html,json}": "prettier --write"
9184
},
9285
"config": {
@@ -95,6 +88,7 @@
9588
}
9689
},
9790
"jest": {
98-
"testEnvironment": "jsdom"
91+
"testEnvironment": "jsdom",
92+
"preset": "ts-jest"
9993
}
10094
}

0 commit comments

Comments
 (0)