Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React-Uploady preview with progress demo - 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} />;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment