Use multiple viewers in the same page

If your page has multiple instances of the `Viewer` component that don't use any plugin, then you can just simply pass the document URL to the `Viewer` as usual:
// Use without plugins
<Viewer fileUrl='/path/to/document.pdf' />
<Viewer fileUrl='/path/to/another-document.pdf' />
However, it's rare to use the `Viewer`component without plugins. Each plugin holds the information about the current document, it is recommended to create a wrapper for the `Viewer`component and plugins:
import { Viewer } from '@react-pdf-viewer/core';
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';
interface ViewerWrapperProps {
fileUrl: string;
const ViewerWrapper: React.FC<ViewerWrapperProps> = ({ fileUrl }) => {
const defaultLayoutPluginInstance = defaultLayoutPlugin();
return <Viewer fileUrl={fileUrl} plugins={[defaultLayoutPluginInstance]} />;
The sample code above uses the default layout plugin, but it doesn't prevent you from using other plugins. Now the page can use multiple instances of the `Viewer` as following:
import ViewerWrapper from './ViewerWrapper';
// The `render` function
<ViewerWrapper fileUrl='/path/to/document.pdf' />
<ViewerWrapper fileUrl='/path/to/other-document.pdf' />