React-media-previewer NPM

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

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