React PDF viewer
v1.6.0

Example: Preview a PDF file before uploading

In this example, we will preview a PDF file from an file input.

const [url, setUrl] = React.useState('');

// Handle the `onChange` event of the `file` input
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    (files.length > 0) && setUrl(URL.createObjectURL(files[0]));
};

return (
    <div>
        <input type="file" accept=".pdf" onChange={onChange} />

        <div style={{ height: '750px' }}>
            {
                url
                    ? <Viewer fileUrl={url} />
                    : (
                        <div
                            style={{
                                alignItems: 'center',
                                border: '2px dashed rgba(0, 0, 0, .3)',
                                display: 'flex',
                                fontSize: '2rem',
                                height: '100%',
                                justifyContent: 'center',
                                width: '100%',
                            }}
                        >
                            Preview area
                        </div>
                    )
            }
        </div>
    </div>
);

(The sample code)

Preview area