Duc Mai

Full stack developer

2022-02-01

React video slide component

React video slide component

React video slide is a react component for videos showcase.

React Video Slide Component

React video slide is a react component for videos showcase.

Motivations

I got a request to build a slide that show videos in slide and the videos should play automatically and auto next when users scroll.

Problems

The main challenge of this task is to do animation with React. If you know react enough then you know that is is often a little bit difficult to do animations in react because when rerendering react will replace dom directly.

Solution

There are several alternatives out there like using react-spring, react-transitions, setTimeOut for updating state after css animations are done. My choice is that
  • render all videos in dom so I will show/hide by css instead
  • the current video will have the highest z-index
  • ReactPlayer for playing videos
  • use an overlay to listen on swipe event on mobile for play next.

Tech stacks

  • Create React Component
  • TailwindCSS
React

About me

How I describe about myself

A developer cares about climate changes and environments

A full stack js developer

A developer is interested in cloud technologies

A challenge lover

Language:

English, Swedish, Vietnamese

Email:
mrducvmv88@gmail.com
LinkedIn:
Duc Mai
Twitter:
Duke Mai
IndieHackers:
Duc Mai