Example: 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>

(The sample code)

Related example