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.
Open file

Related example