React Media Previewer

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 images, video and audio, 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";
import "react-media-previewer/dist/index.css";

function App() {
  const [visible, setVisible] = useState(false);
  return (
    <div className="App">
      <button onClick={() => setVisible(true)}>view media</button>
      <PreviewModal
        visible={visible}
        name="image.png"
        setVisible={setVisible}
        url="https://assets.ruilisi.com/attachment-8de9464b-d286-43a9-b18e-f8a984bf8623.jpg"
        type="image"
      />
    </div>
  );
}

render(<App />, document.getElementById("app"));

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
url	string	media file url
type	string	media file type
name	string	media file name

License

MIT © ruilisi

GitHub

View Github