Customize the protected view

The `Viewer` component supports opening a password-protected PDF document. It displays a view that asks users to provide the password to open the document. This example demonstrates how you can customize that view via the `renderProtectedView` property.
It is a function that accepts a `RenderProtectedViewProps` type and returns a React element. The `RenderProtectedViewProps` type provides two available properties:
ParameterTypeDescriptionFrom
`passwordStatus``PasswordStatus`The password status enum3.11.0
`verifyPassword``Function`The function to verify the password3.11.0
The first property can take one of two possible values:
The second property, `verifyPassword`, is used to verify the password.
Using those properties, it's easy to create a custom protected view:
import type { RenderProtectedViewProps } from '@react-pdf-viewer/core';
import { PasswordStatus, PrimaryButton, TextBox } from '@react-pdf-viewer/core';
const ProtectedView: React.FC<RenderProtectedViewProps> = ({ passwordStatus, verifyPassword }) => {
const [password, setPassword] = React.useState('');
const submit = (): void => verifyPassword(password);
return (
{/* Input to enter the password */}
<TextBox
placeholder="Enter the password ..."
type="password"
value={password}
onChange={setPassword}
/>
{/* Tell users if the password is incorrect */}
{passwordStatus === PasswordStatus.WrongPassword && (
<div>The password is invalid. Please try again!</div>
)}
{/* Submit the password */}
<PrimaryButton onClick={submit}>Submit</PrimaryButton>
);
};
The snippet above uses the built-in `TextBox` and `PrimaryButton` components from the `core` package. However, you can use your own component to match the look and feel of your application.
In the following example, try to enter an incorrect and correct passwords (`123456`) to see the custom view.

See also