DEV Community: ali reza sadeghi

Adding Subtitles to Videos in React: A Simple Tutorial by Alireza 🎉

ali reza sadeghi — Thu, 27 Mar 2025 11:47:13 +0000

By Alireza

Hey there, awesome coders! 👋 I’m Alireza, and today I’m going to walk you through how to add subtitles to a video in a React app. Subtitles are super helpful for making videos accessible or just adding some extra context. Don’t worry if you’re new to React, this tutorial is simple, and easy to follow. We’ll cover two ways to do this: using the ReactPlayer library and the native HTML <video> tag. Let’s dive in! 🚀

What You’ll Need

A React project set up (you can use create-react-app or any other setup).
A video file (we’ll use a sample URL).
A subtitle file in .vtt format (I’ll explain what that is soon).
Basic knowledge of React components.

Ready? Let’s get started! 😊

Step 1: Understanding Subtitles and the `.vtt` File

Before we code, let’s talk about subtitles. Subtitles are usually stored in a .vtt file (WebVTT format). It’s a simple text file that looks like this:


1
00:00:01.000 --> 00:00:04.000
Hello, welcome to my video!

2
00:00:04.001 --> 00:00:07.000
This is a simple subtitle example.

WEBVTT is the header.
Each block has a number, a time range (like 00:00:01.000 --> 00:00:04.000), and the text to show.

You can create this file yourself with a text editor and save it as subtitles.vtt. For this tutorial, assume we have a subtitles.vtt file ready to use.

Option 1: Using `ReactPlayer` with Subtitles

First, let’s use the ReactPlayer library. It’s a popular, easy-to-use package for playing videos in React, and it supports subtitles out of the box.

Step 1.1: Install `ReactPlayer`

If you haven’t already, install ReactPlayer in your project. Open your terminal and run:

npm install react-player

Step 1.2: Set Up Your Component

Create a new file called VideoPlayerWithSubtitles.js (or use an existing one). Here’s the code:

import React from 'react';
import ReactPlayer from 'react-player';
import subtitleFile from './subtitles.vtt'; // Import your .vtt file

const VideoPlayerWithSubtitles = () => {
  const videoUrl = 'your-video-url-here'; // Replace with your video URL

  return (
    <div style={{ width: '100%', maxWidth: '100%', overflow: 'hidden' }}>
      <ReactPlayer
        url={videoUrl}
        controls // Adds play/pause, volume, etc.
        width="100%" // Fits the container
        height="auto" // Keeps the video’s natural aspect ratio
        config={{
          file: {
            tracks: [
              {
                kind: 'subtitles', // Type of track
                src: subtitleFile, // Your imported .vtt file
                srcLang: 'en', // Language code (English)
                label: 'English', // What shows in the subtitle menu
                default: true, // Automatically turns subtitles on
              },
            ],
          },
        }}
      />
    </div>
  );
};

export default VideoPlayerWithSubtitles;

Step 1.3: Add It to Your App

In your App.js or wherever you want the video, import and use the component:

import VideoPlayerWithSubtitles from './VideoPlayerWithSubtitles';

function App() {
  return (
    <div>
      <h1>Welcome to Alireza’s Video Player! 🎉</h1>
      <VideoPlayerWithSubtitles />
    </div>
  );
}

export default App;

How It Works

ReactPlayer takes a url prop for the video and a config object to set up subtitles.
The tracks array tells it where to find the .vtt file and how to display it.
The controls prop adds a built-in player interface where users can toggle subtitles.

When you run this, you’ll see a video player with subtitles that show up automatically. Cool, right? 😎

Option 2: Using the Native `<video>` Tag

If you don’t want to use a library, you can use the HTML <video> tag directly in React. It’s just as simple!

Step 2.1: Set Up Your Component

Here’s the code for the same VideoPlayerWithSubtitles.js file, but using <video>:

import React from 'react';

const VideoPlayerWithSubtitles = () => {
  const videoUrl = 'your-video-url-here'; // Replace with your video URL
  const subtitleUrl = 'your-subtitle-url-here'; // Replace with your .vtt URL

  return (
    <div style={{ width: '100%', maxWidth: '100%', overflow: 'hidden' }}>
      <video controls>
        <source src={videoUrl} type="video/mp4" />
        <track
          kind="subtitles"
          src={subtitleUrl}
          label="English"
          srcLang="en"
          default
        />
      </video>
    </div>
  );
};

export default VideoPlayerWithSubtitles;

Step 2.2: Add It to Your App

Use it the same way as before in 'App.js':

import VideoPlayerWithSubtitles from './VideoPlayerWithSubtitles';

function App() {
  return (
    <div>
      <h1>Welcome to Alireza’s Video Player! 🎉</h1>
      <VideoPlayerWithSubtitles />
    </div>
  );
}

export default App;

How It Works

The <video> tag uses <source> for the video file and <track> for subtitles.
The controls attribute adds a basic player interface.
The track element links to your .vtt file and sets it as the default subtitle.

Note: For this method, the .vtt file needs to be hosted somewhere (like your server or a public URL), not imported like in ReactPlayer.

Which Option Should You Choose?

Use ReactPlayer if you want a quick setup with extra features (like YouTube support) and don’t mind adding a library.
Use <video> if you want a lightweight solution with no dependencies and full control over the HTML.

Both work great, and as Alireza, I’d say it depends on your project’s needs! 👍

Final Touches

Styling: Adjust the style prop or add CSS to make it look nice.
Testing: Try your video and subtitles in different browsers (Chrome, Firefox, etc.) to ensure they work.
Accessibility: Subtitles are already a win for accessibility—nice job! 🙌

That’s it! You’ve just learned how to add subtitles to a video in React, thanks to this tutorial by me, Alireza. Go ahead and try it out, and let me know how it goes. Happy coding! 🚀

Article by Alireza | React Specialist | Contact Me

Introduction to Jotai: Simple and Powerful State Management in React

ali reza sadeghi — Sat, 08 Mar 2025 08:46:47 +0000

Introduction

State management is one of the main challenges in developing React applications. Various methods such as Redux, Context API, and Recoil are available for this purpose. However, in some cases, these tools introduce unnecessary complexity, especially for small or medium-sized projects.

Jotai is a lightweight state management library for React that offers a minimal, simple, and powerful approach. It uses atoms (independent state units) and works based on React Hooks.

Installation and Setup

To start using Jotai, you first need to install it. This can be easily done using npm or yarn:

npm install jotai
or
yarn add jotai

After installation, we can define our first atom.

Creating and Using Atoms in Jotai

An atom in Jotai is the smallest unit of state, which can be used in any component. For example, let's create a simple atom to manage a counter:

import { atom, useAtom } from 'jotai';

// Define an atom for the counter
const countAtom = atom(0);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  return (
    <div>
      <p>Counter Value: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

Code Explanation

We defined a state called countAtom using atom, initializing it with 0.

In the Counter component, we used useAtom to access the state value and its setter function.

Every time the button is clicked, the counter value increases.

Managing Derived State

Sometimes, we need to calculate a value based on another value. In Jotai, we can use Derived Atoms:

const doubleCountAtom = atom((get) => get(countAtom) * 2);

function DoubleCounter() {
  const [doubleCount] = useAtom(doubleCountAtom);
  return <p>Double Counter Value: {doubleCount}</p>;
}

Managing Async Data with Jotai

To manage async data (e.g., fetching data from an API), we can use Async Atoms:


const fetchUserAtom = atom(async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
  return response.json();
});

function UserProfile() {
  const [user] = useAtom(fetchUserAtom);
  return <p>User Name: {user.name}</p>;
}

Practical Project: Todo List

In this section, we'll implement a Todo List project using Jotai.

Defining the State

const todoListAtom = atom([]);
const newTodoAtom = atom('');

Todo List Component

function TodoApp() {
  const [todos, setTodos] = useAtom(todoListAtom);
  const [newTodo, setNewTodo] = useAtom(newTodoAtom);

  const addTodo = () => {
    if (newTodo.trim()) {
      setTodos([...todos, newTodo]);
      setNewTodo('');
    }
  };

  return (
    <div>
      <input value={newTodo} onChange={(e) => setNewTodo(e.target.value)} />
      <button onClick={addTodo}>Add Task</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

Conclusion

Jotai is a simple yet powerful state management tool for React that:

Has a clean and readable syntax.

Uses hooks and is fully compatible with React.

Provides state management for complex and async operations without extra boilerplate.

If you're looking for a simple alternative to Redux or Context API, Jotai can be an excellent choice for your project!

DEV Community: ali reza sadeghi

Adding Subtitles to Videos in React: A Simple Tutorial by Alireza 🎉

What You’ll Need

Step 1: Understanding Subtitles and the .vtt File

Option 1: Using ReactPlayer with Subtitles

Step 1.1: Install ReactPlayer

Step 1.2: Set Up Your Component

Step 1.3: Add It to Your App

How It Works

Option 2: Using the Native <video> Tag

Step 2.1: Set Up Your Component

Step 2.2: Add It to Your App

How It Works

Which Option Should You Choose?

Final Touches

Introduction to Jotai: Simple and Powerful State Management in React

Introduction

Installation and Setup

Creating and Using Atoms in Jotai

Managing Derived State

Managing Async Data with Jotai

Practical Project: Todo List

Conclusion

Step 1: Understanding Subtitles and the `.vtt` File

Option 1: Using `ReactPlayer` with Subtitles

Step 1.1: Install `ReactPlayer`

Option 2: Using the Native `<video>` Tag