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 @etchebarneluiss/react-media-previewer

or

yarn add @etchebarneluiss/react-media-previewer

Usage

1import { render } from "react-dom";
2import PreviewModal from "react-media-previewer";
3
4function App() {
5  const [visible, setVisible] = useState(false);
6  return (
7    <div id="app">
8      <button onClick={() => setVisible(true)}>open</button>
9      <PreviewModal
10        visible={visible}
11        setVisible={setVisible}
12        urls={["YOUR IMAGE URL", "YOUR IMAGE URL"]}
13        urlsTypes={["YOUR FILE MIME TYPE", "YOUR FILE MIME TYPE"]}
14      />
15    </div>
16  );
17}
18
19render(<App />, 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
urlsTypes	string[]	media file mime types

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
  • ...

Credits

This project is forked from the original repository by Ruilisi. I would like to extend my gratitude to them for their excellent work. You can find the original repository here.

License

MIT