Customize the full screen button

The EnterFullScreen component provided by the Full Screen 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 { fullScreenPlugin, RenderEnterFullScreenProps } from '@react-pdf-viewer/full-screen';
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/full-screen/lib/styles/index.css';
const fullScreenPluginInstance = fullScreenPlugin();
const { EnterFullScreen } = fullScreenPluginInstance;
// Your render function
<EnterFullScreen>
{
(props: RenderEnterFullScreenProps) => (
<button
style={{
...
}}
onClick={props.onClick}
>
Enter fullscreen
</button>
)
}
</EnterFullScreen>
In your custom button, it is possible to reuse the <FullScreenIcon /> component:
import { FullScreenIcon } from '@react-pdf-viewer/full-screen';
// Your render function
<EnterFullScreen>
{
(props: RenderEnterFullScreenProps) => (
<button
style={{
...
}}
onClick={props.onClick}
>
<FullScreenIcon /> Enter fullscreen
</button>
)
}
</EnterFullScreen>

See also