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 (
{}
<TextBox
placeholder="Enter the password ..."
type="password"
value={password}
onChange={setPassword}
/>
{}
{passwordStatus === PasswordStatus.WrongPassword && (
<div>The password is invalid. Please try again!</div>
)}
{}
<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