React Media Previewer

简体中文 | English

Purpose

react-media-previewer is to create a previewer that is compatible with viewing various media files by one click. It is a component built with React and Typescript. In order to preview media files such as image, video, audio and PDF, we made it.

Installation

``
npm install react-media-previewer
`

or

`
yarn add react-media-previewer
`

Usage

`js
import { render } from "react-dom";
import PreviewModal from "react-media-previewer";

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


render(, document.getElementById("app"));
``

Preview Files

Live Demo

Try Demo on CodeSandbox

Props

| Property | Type | Description |
| :--------- | :------- | :-------------------------------------------------------------- |
| visible | bollean | whether the previewer is visible or not |
| setVisible | function | function called to close the previewer when previewer is opened |
| urls | string[] | media file urls |

Roadmap

- ✅ Image preview
- ✅ Image rotate
- Image scale
- ✅ Multiple images preview
- ✅ Audio and video preview
- ✅ PDF preview
- PDF pagination
- ✅ Word preview
- ✅ Excel preview
- ✅ PPT preview
- More features
- Keyboard support
- ...

License

MIT