1.3.25 • Published 2 months ago

@waleed-hesham/react-media-previewer v1.3.25

Weekly downloads
-
License
MIT
Repository
github
Last release
2 months ago

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

PropertyTypeDescription
visiblebolleanwhether the previewer is visible or not
setVisiblefunctionfunction called to close the previewer when previewer is opened
urlsstring[]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