Media Library

The Media Library displays a collection of images/videos in an organized grid.

<MediaLibrary loading={false} size={'sm'} data={data.mediaData.slice(0, 3)} />

Props

Prop	Type	Default	Description
size	'auto' \| 'sm' \| 'md'	'auto'	Defines the number of columns the component will display the media cards. sm = 2, md = 4, auto = display 2 columns when the viewport is less that 768px & 4 columns when greater than or equal to 768px
pageSize	number	5	The number of the cards that will be visible on screen.
variant	0	button	Media library with scrolling ability when the type is set to scroll.
loading	bool	false	If true, the Skeleton loading cards will be visible on screen as per the page size.
showMore	bool	false	If true, show the "Show more" button
data	Array<{ title: string; mediaType: 'video' \| 'img'; mediaUrl?: string; thumbNailUrl?: string; value?: number; }>	[]	Data containing the media items in the specific format
onShowMoreClick	func		specific to MediaLibrary, Function that is called when the Show more button is clicked.
data-testid	string		data-testid added to the root element of the component
onMediaSelect	func		Callback fired when Media card is selected.
selectedMedia	{ title: string; mediaType: 'video' \| 'img'; mediaUrl?: string; thumbNailUrl?: string; value?: number; } \| null		Render selected media item if passed.

Examples

Media Library with pagination

() => {
  const mediaData = data.mediaData.slice(0, 19);

  const pageSize = 8;
  const [page, setPage] = React.useState(1);
  const [itemData, setItemData] = React.useState([]);
  const totalPages = mediaData.length % pageSize;
  const [loading, setLoading] = React.useState(false);
  const [showMore, setShowMore] = React.useState(true);

  React.useEffect(() => {
    if (page <= totalPages) {
      setLoading(true);
      const timeoutId = setTimeout(() => {
        const pageData = mediaData.slice(0, pageSize * page);
        setItemData(pageData);
        setLoading(false);
        setShowMore(!(page + 1 > totalPages));
      }, 500 + Math.floor(Math.random() * 2000));
      return () => {
        clearTimeout(timeoutId);
        setLoading(false);
      };
    }
  }, [page]);

  const onShowMoreClick = () => {
    setPage(page + 1);
  };

  return (
    <MediaLibrary
      pageSize={pageSize}
      loading={loading}
      data={itemData}
      onShowMoreClick={onShowMoreClick}
      showMore={showMore}
    />
  );
};

Media Library with Selected media item

() => {
  const mediaData = data.mediaData.slice(0, 4);

  const pageSize = 8;
  const [page, setPage] = React.useState(1);
  const [itemData, setItemData] = React.useState([]);
  const totalPages = mediaData.length % pageSize;
  const [loading, setLoading] = React.useState(false);
  const [showMore, setShowMore] = React.useState(true);
  const [selected, setSelected] = React.useState(mediaData[1]);

  React.useEffect(() => {
    if (page <= totalPages) {
      setLoading(true);
      const timeoutId = setTimeout(() => {
        const pageData = mediaData.slice(0, pageSize * page);
        setItemData(pageData);
        setLoading(false);
        setShowMore(!(page + 1 > totalPages));
      }, 500 + Math.floor(Math.random() * 2000));
      return () => {
        clearTimeout(timeoutId);
        setLoading(false);
      };
    }
  }, [page]);

  const onShowMoreClick = () => {
    setPage(page + 1);
  };

  const onMediaSelect = (mediaItem) => {
    setSelected(mediaItem);
  };

  return (
    <MediaLibrary
      pageSize={pageSize}
      loading={loading}
      data={itemData}
      onShowMoreClick={onShowMoreClick}
      showMore={showMore}
      onMediaSelect={onMediaSelect}
      selectedMedia={selected}
    />
  );
};

Media Library with favorites

() => {
  const mediaData = data.mediaData.slice(0, 4);

  const [favorites, setFavorites] = React.useState({
    [mediaData[0].title]: true,
    [mediaData[2].title]: true,
  });

  return (
    <MediaLibrary
      data={mediaData}
      isFavorite={(media) => favorites[media.title]}
      onFavorite={(media) =>
        setFavorites((prev) => ({ ...prev, [media.title]: !prev[media.title] }))
      }
    />
  );
};

Media Library with Failed State

() => {
  const mediaData = [
    {
      title: 'Appreciate Great',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/thumbnails/oct-ec-appreci8great1.jpg',
      mediaUrl: '',
      value: 4,
    },
  ];

  return <MediaLibrary data={mediaData} size={'sm'} />;
};

Media Library with Gifs

() => {
  const mediaData = [
    {
      title: 'Appreciate Great',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/thank_you_x2.jpg',
      normalUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/thank_you_x2.gif',
      largeUrl: '',
      mediaUrl: '',
      value: 4,
    },
    {
      title: 'passover dove',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Static/passover_dove.jpg',
      largeUrl: '',
      normalUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/passover_dove.gif',
      mediaUrl: '',
      value: 5,
    },
    {
      title: 'gratitude day',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/gratitude_day.gif',
      largeUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Static/gratitude_day.gif',
      normalUrl: '',
      mediaUrl: '',
      value: 5,
    },
  ];

  return <MediaLibrary data={mediaData} size={'sm'} />;
};

Media Library Infinity Scroll

() => {
  const mediaData = data.mediaData;

  const pageSize = 8;
  const [page, setPage] = React.useState(1);
  const [itemData, setItemData] = React.useState([]);
  const totalPages = Math.ceil(mediaData.length / pageSize);
  const [loading, setLoading] = React.useState(false);
  const [showMore, setShowMore] = React.useState(true);

  React.useEffect(() => {
    if (page <= totalPages) {
      setLoading(true);
      const timeoutId = setTimeout(() => {
        const pageData = mediaData.slice(0, pageSize * page);
        setItemData(pageData);
        setLoading(false);
        setShowMore(!(page + 1 > totalPages));
      }, 500 + Math.floor(Math.random() * 10));
      return () => {
        clearTimeout(timeoutId);
        setLoading(false);
      };
    }
  }, [page]);

  const onShowMoreClick = () => {
    setPage(page + 1);
  };

  return (
    <MediaLibrary
      pageSize={pageSize}
      loading={loading}
      data={itemData}
      onShowMoreClick={onShowMoreClick}
      showMore={showMore}
      variant="scroll"
    />
  );
};