lbry-desktop/ui/component/fileThumbnail/thumb.jsx

28 lines
626 B
React
Raw Normal View History

2021-06-14 15:24:21 +02:00
// @flow
import React from 'react';
import classnames from 'classnames';
import type { Node } from 'react';
import useLazyLoading from 'effects/use-lazy-loading';
type Props = {
thumb: string,
fallback: ?string,
2021-06-14 15:24:21 +02:00
children?: Node,
className?: string,
2021-06-14 15:24:21 +02:00
};
const Thumb = (props: Props) => {
const { thumb, fallback, children, className } = props;
2021-06-14 15:24:21 +02:00
const thumbnailRef = React.useRef(null);
useLazyLoading(thumbnailRef, fallback || '');
2021-06-14 15:24:21 +02:00
return (
<div ref={thumbnailRef} data-background-image={thumb} className={classnames('media__thumb', className)}>
2021-06-14 15:24:21 +02:00
{children}
</div>
);
};
export default Thumb;