Example: Use the default rotate buttons
The following example uses the default rotate buttons <RotateBackwardButton /> and <RotateForwardButton /> provided by the Rotate plugin.
import { Viewer } from '@react-pdf-viewer/core'; import { rotatePlugin } from '@react-pdf-viewer/rotate'; import '@react-pdf-viewer/core/lib/styles/index.css'; // Your render function const rotatePluginInstance = rotatePlugin(); const { RotateBackwardButton, RotateForwardButton } = rotatePluginInstance; return ( <div style={{ border: '1px solid rgba(0, 0, 0, 0.3)', display: 'flex', flexDirection: 'column', height: '100%', }} > <div style={{ alignItems: 'center', backgroundColor: '#eeeeee', borderBottom: '1px solid rgba(0, 0, 0, 0.1)', display: 'flex', justifyContent: 'center', padding: '4px', }} > <div style={{ padding: '0px 2px' }}> <RotateBackwardButton /> </div> <div style={{ padding: '0px 2px' }}> <RotateForwardButton /> </div> </div> <div style={{ flex: 1, overflow: 'hidden', }} > <Viewer fileUrl='/assets/pdf-open-parameters.pdf' plugins={[ rotatePluginInstance, ]} /> </div> </div> );