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
{(props: RenderOpenProps) => (
backgroundColor: '#357edd',
border: 'none',
borderRadius: '4px',
color: '#ffffff',
cursor: 'pointer',
padding: '8px',
position: 'relative',
onChange={(e) => props.onClick(e)}
bottom: 0,
cursor: 'pointer',
height: '100%',
left: 0,
opacity: 0,
position: 'absolute',
right: 0,
top: 0,
width: '100%',
Open file
The sample code creates a custom `<input type="file" />` which you can see on the CSS Layout site.
Open file

See also