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

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      />
14    </div>
15  );
16}
17
18render(<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

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