React-Uploady preview with progress demo - CustomImagePreview.jsx

CustomImagePreview.jsx

import styled from "styled-components"
import { useItemProgressListener } from "@rpldy/uploady";

const PreviewImage = styled.img`
  margin: 5px;
  max-width: 200px;
  height: auto;
  transition: opacity 0.4s;

  ${({ completed }) => `opacity: ${completed / 100};`}
`;

const CustomImagePreview = ({ id, url }) => {
  const [completed, setCompleted] = useState(0);

  useItemProgressListener(item => {
    if (item.id === id) {
      setCompleted(item.completed);
    }
  });

  return <PreviewImage src={url} completed={completed} />;
};