Example: Customize the open button

The Open component provided by the Open plugin has a render prop that allows consumers to use a custom button. Here is the sample code that demonstrates the ability:

import { Viewer } from '@react-pdf-viewer/core';
import { openPlugin, RenderOpenProps } from '@react-pdf-viewer/open';

import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/open/lib/styles/index.css';

const openPluginInstance = openPlugin();
const { Open } = openPluginInstance;

// Your render function
<Open>
{
    (props: RenderOpenProps) => (
        <div
            style={{
                backgroundColor: '#357edd',
                border: 'none',
                borderRadius: '4px',
                color: '#ffffff',
                cursor: 'pointer',
                padding: '8px',
                position: 'relative',
            }}
        >
            <input
                type='file'
                onChange={e => props.onClick(e)}
                style={{
                    bottom: 0,
                    cursor: 'pointer',
                    height: '100%',
                    left: 0,
                    opacity: 0,
                    position: 'absolute',
                    right: 0,
                    top: 0,
                    width: '100%',
                }}
            />
            Open file
        </div>
    )
}
</Open>

The sample code creates a custom <input type="file" /> which you can see on the CSS Layout site.

(The sample code)

Open file

Related example