React Doc Previewer

React Doc Previewer is a versatile React component library designed to facilitate the previewing of various image and pdf formats within your React applications.

Features

Pdf Preview: Display previews for pdf documents. Image Preview: Preview images in various formats such as JPEG, PNG . Responsive: Ensures a responsive viewing experience across devices.

Installation

You can install the package via npm or yarn:

1npm i react-doc-previewer

Usage

1  const [show, setShow] = useState(false)
2  const [document, setDocument] = useState({ url: IMAGE_URL, type: "image" });
3  return (
4      <div style={{ position: "relative", width: "100%", height: "100vh", overflow: "hidden" }}>
5        <DocPreviewer type={im.type} variant={'full'} url={im.url} show={show} onClose={() => setShow(false)} />
6        <button onClick={() => setShow(true)} >show</button>
7        <button
8          onClick={() => {
9            setDocument((prev) => (prev.type === "image" ? {
10              url: PDF_URL,
11              type: "pdf"
12            } : {
13              url: IMAGE_URL2,
14              type: "image"
15            }));
16          }}
17        >
18          switch
19        </button>
20      </div>

Props

Component Props

• type: image | pdf
• variant: full | inherit | [number, number]
• show: boolean
• onClose: () => {}
• url: url of the document

License

This project is licensed under the MIT License.

Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue for any bugs or feature requests.