Skip to content

Latest commit

 

History

History
113 lines (86 loc) · 2.39 KB

README.md

File metadata and controls

113 lines (86 loc) · 2.39 KB
Raw

React Doc Viewer Plus

A React component for previewing various types of documents and images. This component provides a simple and elegant way to display documents in your React applications.

Features

  • 🖼️ Image preview support
  • 📄 Document preview support
  • 🎯 Simple and easy to use
  • 🎨 Customizable UI
  • 🔄 Preview toggle functionality

Supported File Types

Images

  • PNG (.png)
  • JPEG/JPG (.jpg, .jpeg)
  • GIF (.gif)
  • BMP (.bmp)
  • WEBP (.webp)
  • SVG (.svg)
  • ICO (.ico)

Documents

  • PDF (.pdf)
  • OFD (.ofd)
  • Microsoft Word (.doc, .docx)
  • Microsoft Excel (.xls, .xlsx)
  • Microsoft PowerPoint (.ppt, .pptx)
  • Text files (.txt)
  • Rich Text Format (.rtf)
  • Markdown (.md)

Other Formats

  • CSV (.csv)
  • XML (.xml)
  • HTML (.html, .htm)
  • JSON (.json)

Installation

npm install react-doc-viewer-plus
# or
yarn add react-doc-viewer-plus

Usage

Here's a basic example of how to use the component:

import React, { useState } from 'react';
import { DocViewerPlus } from 'react-doc-viewer-plus';

function App() {
  const [visible, setVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setVisible(!visible)}>
        {visible ? 'Close Preview' : 'Click to Preview'}
      </button>
      
      <DocViewerPlus 
        previewFile={{
          fileUrl: "your-file-url-here",
          fileName: "example.png"
        }}
        visibleViewerPlus={visible}
        onVisibleChange={() => setVisible(!visible)}
      />
    </div>
  );
}

Props

Prop Type Description
previewFile Object Contains fileUrl and fileName for the document to preview
visibleViewerPlus boolean Controls the visibility of the preview
onVisibleChange function Callback function when visibility changes

Development

# Clone the repository
git clone https://github.com/mengtaiqili/react-doc-viewer-plus.git

# Install dependencies
yarn install

# Start development server
yarn start

License

MIT © mengtaiqili

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b feature/your-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin feature/your-feature)
  5. Create a new Pull Request

Support

If you have any questions or need help, please open an issue in the GitHub repository.