React PDF viewer

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 (
            style={Object.assign({}, {
                border: '1px solid rgba(0, 0, 0, .3)',
                height: '100%',
                overflow: 'hidden',
                width: '100%',
                style={Object.assign({}, {
                    height: '100%',
                    overflow: 'scroll',

We then can pass the layout to Viewer:


Here is how the viewer looks like:

(The sample code)