react-player - npm Package Compare versions

Comparing version 2.2.0-beta.2 to 2.2.0

MIGRATING.md

		@@ -7,16 +7,28 @@ ## Migrating to `v2.0`

		ReactPlayer v2.0 uses [React lazy loading](https://reactjs.org/docs/code-splitting.html#reactlazy) to only load the players required based on the `url` prop passed in. Previous versions of ReactPlayer would include the code for all players, regardless of what type of player is used.
		As of `v2.2`, if your build system supports `import()` statements, use `react-player/lazy` to [lazy load](https://reactjs.org/docs/code-splitting.html#reactlazy) the appropriate player for the `url` you pass in. This adds several `reactPlayer` chunks to your output, but reduces your main bundle size.

		Because of this, 🔥 __single player imports are now redundant, and have been removed__. Instead of importing single players, you can safely import from `react-player` and only the relevant player will be loaded if you only use one type of `url`.
		Due to the use of `lazy` and `Suspense`, 🔥 __React 16.6 or later is now required__.

		```jsx
		// Before
		import YouTubePlayer from 'react-player/lib/players/YouTube'
		import ReactPlayer from 'react-player'

		// After
		import YouTubePlayer from 'react-player'
		import ReactPlayer from 'react-player/lazy'
		```

		Due to the use of `lazy` and `Suspense`, 🔥 __React 16.6 or later is now required__.
		Lazy players were the default import in `v2.1`, but moved to `react-player/lazy` in `v2.2` to avoid causing problems with common build systems.

		### Single player imports

		As of `v2.2`, the 🔥 __location of single player imports has changed__. Single players are not available in `v2.0` and `v2.1`.

		```jsx
		// Before
		import ReactPlayer from 'react-player/lib/players/YouTube'

		// After
		import ReactPlayer from 'react-player/youtube'
		```

		### Preloading
		@@ -23,0 +35,0 @@

package.json

		{
		"name": "react-player",
		"version": "2.2.0-beta.2",
		"version": "2.2.0",
		"description": "A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion",
		@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

		@@ -26,3 +26,3 @@ <h1 align='center'>

		ReactPlayer `v2.0` removes single player imports in favour of lazy loading players. Support for `preload` has also been removed, plus some other changes. See [`MIGRATING.md`](/MIGRATING.md) for information.
		ReactPlayer `v2.0` changes single player imports and adds lazy loading players. Support for `preload` has also been removed, plus some other changes. See [`MIGRATING.md`](/MIGRATING.md) for information.

		@@ -32,3 +32,3 @@ ### Usage
		```bash
		npm install react-player
		npm install react-player # or yarn add react-player
		```
		@@ -40,19 +40,26 @@

		const App = () => (
		<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
		)
		// Render a YouTube video player
		<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
		```

		If your build system supports `import()` statements, use `react-player/lazy` to lazy load the appropriate player for the `url` you pass in. This will add several `reactPlayer` chunks to your bundle, but reduce your main bundle size.
		By default, ReactPlayer supports [many different types](#supported-media) of `url`. If you only ever use one type, use imports such as `react-player/youtube` to reduce your bundle size. See [config keys](#config-prop) for all player keys.

		```jsx
		import React from 'react'
		import ReactPlayer from 'react-player/lazy'
		import ReactPlayer from 'react-player/youtube'

		// Only loads the YouTube player
		const App = () => (
		<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
		)
		<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
		```

		If your build system supports `import()` statements, use `react-player/lazy` to lazy load the appropriate player for the `url` you pass in. This adds several `reactPlayer` chunks to your output, but reduces your main bundle size.

		```jsx
		import React from 'react'
		import ReactPlayer from 'react-player/lazy'

		// Lazy load the YouTube player
		<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
		```

		Demo page: [`https://cookpete.com/react-player`](https://cookpete.com/react-player)
		@@ -59,0 +66,0 @@

CHANGELOG.md

Sorry, the diff of this file is too big to display

react-player - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics