ReactJs example by Ryan Vice - www.ViceSoftware.com

Hello React - component lifecycle - mounting and unmounting. author(s): Ryan Vice

by dipeshbeckham

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
 
<div id="view"/>

Babel + JSX

import React from 'react';
import { Heart, MessageCircle, Send, Bookmark, MoreHorizontal, ChevronLeft, ChevronRight, Play } from 'lucide-react';

// Sample media data
const sampleMedia = [
  {
    type: 'image',
    url: '/api/placeholder/1200/630', // 1.91:1 aspect ratio
    originalWidth: 1200,
    originalHeight: 630,
  },
  {
    type: 'image',
    url: '/api/placeholder/1080/1080', // 1:1 aspect ratio
    originalWidth: 1080,
    originalHeight: 1080,
  },
  {
    type: 'video',
    url: '/api/placeholder/1080/1350', // 4:5 aspect ratio
    thumbnail: '/api/placeholder/1080/1350',
    originalWidth: 1080,
    originalHeight: 1350,
  }
];

const InstagramPost = () => {
  const [currentIndex, setCurrentIndex] = React.useState(0);
  const [isLiked, setIsLiked] = React.useState(false);
  const [isSaved, setIsSaved] = React.useState(false);
  const [likes, setLikes] = React.useState(1234);
  const videoRefs = React.useRef({});
  
  // Calculate the base aspect ratio from the first media item
  const baseAspectRatio = sampleMedia[0].originalWidth / sampleMedia[0].originalHeight;
  const paddingPercentage = (1 / baseAspectRatio) * 100;

  const handleNext = () => {
    setCurrentIndex((prev) => (prev + 1) % sampleMedia.length);
  };

  const handlePrev = () => {
    setCurrentIndex((prev) => (prev - 1 + sampleMedia.length) % sampleMedia.length);
  };

  const handleLike = () => {
    setIsLiked(!isLiked);
    setLikes(isLiked ? likes - 1 : likes + 1);
  };

  const getMediaStyles = (mediaItem) => {
    const itemAspectRatio = mediaItem.originalWidth / mediaItem.originalHeight;
    
    if (itemAspectRatio > baseAspectRatio) {
      return {
        height: '100%',
        width: 'auto',
        position: 'absolute',
        left: '50%',
        transform: 'translateX(-50%)'
      };
    } else {
      return {
        width: '100%',
        height: 'auto',
        position: 'absolute',
        top: '50%',
        transform: 'translateY(-50%)'
      };
    }
  };

 ...