Introduction to React Third Part Package

 

1. Third-Party Packages

A Third-Party Package is a reusable code developed to perform a specific functionality

1.1 Advantages

• Easy integration
• Saves Time
• More productivity with fewer lines of code
• Better Error Handling
• More Customisation Options ... many more.

We have used many third-party packages like React Router, React Loader, React Icons, JWT, etc.

Node Package Manager contains Third-Party Packages for React JS, Node JS, Angular JS, and many more libraries and frameworks. To know more about npm you can refer to this.

1.2 Selecting a Third-Party Package

1.2.1 Things to Consider

• Users Satisfaction
• Popularity (number of stars)
• Maintenance
• Documentation
• Number of unresolved issues

Compare the packages in the above categories and pick one for the application.

2. Third-Party Package - 

react-player

NPM contains a react-player, a third-party package that provides a React component for playing a variety of URLs, including file paths, YouTube, Facebook, etc.

Installation Command:

1

npm install react-player

SHELL

2.1 React Player Props

We can provide different props to ReactPlayer. Below are some of the most commonly used props.

Prop	Description	Default Value
playing	Set to true or false to pause or play the media	false
controls	Set to true to display native player controls.	false
light	Set to true to show the video thumbnail, which loads the full player on click. Pass in an image URL to override the preview image	false
width	Set the width of the player	640px
height	Set the height of the player	360px
className	Add the custom styles to ReactPlayer	-

Example:

File: src/App.js

1

2

3

4

5

6

7

import VideoPlayer from './components/VideoPlayer'

import './App.css'

const App = () => <VideoPlayer />

export default App

JSX

File: src/components/VideoPlayer/index.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

import ReactPlayer from 'react-player'

import './index.css'

const videoURL = 'https://youtu.be/YE7VzlLtp-4'

const VideoPlayer = () => (

<div className="video-container">

<h1 className="heading">Video Player</h1>

<div className="responsive-container">

<ReactPlayer url={videoURL} />

</div>

</div>

)

export default VideoPlayer

JSX

Collapse

ReactPlayer Supports different types of URLs.

2.1.1 controls Prop

File: src/components/VideoPlayer/index.js

1

2

3

4

5

6

7

8

9

const VideoPlayer = () => (

<div className="video-container">

<h1 className="heading">Video Player</h1>

<div className="responsive-container">

<ReactPlayer url={videoURL} controls />

</div>

</div>

)

export default VideoPlayer

JSX

2.1.2 playing Prop

File: src/components/VideoPlayer/index.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

import {Component} from 'react'

import ReactPlayer from 'react-player'

import './index.css'

const videoURL = 'https://youtu.be/YE7VzlLtp-4'

class VideoPlayer extends Component {

state = {

isPlaying: false,

}

onClickPlay = () => {

this.setState(prevState => ({isPlaying: !prevState.isPlaying}))

}

render() {

const {isPlaying} = this.state

const btnText = isPlaying ? 'Pause' : 'Play'

return (

<div className="video-container">

<h1 className="heading">Video Player</h1>

<div className="responsive-container">

<ReactPlayer url={videoURL} playing={isPlaying} />

</div>

<button type="button" className="button" onClick={this.onClickPlay}>

{btnText}

</button>

</div>

)

}

}

export default VideoPlayer

 

JSX

Collapse

Reference

To know more about

react-player

, you can refer to this. react-player - npm (npmjs.com)