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' />

(The sample code)