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:

Parameter	Type	Description	From
`passwordStatus`	`PasswordStatus`	The password status enum	3.11.0
`verifyPassword`	`Function`	The function to verify the password	3.11.0

The first property can take one of two possible values:

`PasswordStatus.RequiredPassword`: Indicate that the document requires a password to open
`PasswordStatus.WrongPassword`: Indicate that the password users provide isn't correct

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.

(The sample code)

Customize the protected view

See also