Skip to content

Latest commit

 

History

History
88 lines (67 loc) · 2.22 KB

README.md

File metadata and controls

88 lines (67 loc) · 2.22 KB
Raw

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

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

function App() {
  const [visible, setVisible] = useState(false);
  return (
    <div id="app">
      <button onClick={() => setVisible(true)}>open</button>
      <PreviewModal
        visible={visible}
        setVisible={setVisible}
        urls={["YOUR IMAGE URL", "YOUR IMAGE URL"]}
      />
    </div>
  );
}

render(<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