React PDF viewer
v1.7.0

Example: Create a minimal viewer without the toolbar and sidebar

The default layout is constructed by different parts such as main, container, toolbar and sidebar. If you want to have a minimal viewer that doesn't include the toolbar and sidebar, you can create a custom layout as following:

import { RenderToolbar, Slot } from '@phuocng/react-pdf-viewer';

const layout = (
    isSidebarOpened: boolean,
    container: Slot,
    main: Slot,
    toolbar: RenderToolbar,
    sidebar: Slot,
): React.ReactElement => {
    return (
        <div
            {...container.attrs}
            style={Object.assign({}, {
                border: '1px solid rgba(0, 0, 0, .3)',
                height: '100%',
                overflow: 'hidden',
                width: '100%',
            }, container.attrs.style)}
        >
            {container.children}
            <div
                {...main.attrs}
                style={Object.assign({}, {
                    height: '100%',
                    overflow: 'scroll',
                }, main.attrs.style)}
            >
                {main.children}
            </div>
        </div>
    );
};

We then can pass the layout to Viewer:

<Viewer
    fileUrl="..."
    layout={layout}
/>

Here is how the viewer looks like:

(The sample code)