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