ruilisi / react-media-previewer

A media previewer component for React

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

react-media-previewer's Issues

Feature Request: Additional Props for Component Customization

Hi all,

I have been using your library in one of my projects, and I must say it has been incredibly helpful. However, I have encountered a need for more customization options to better fit my use case.

Would it be possible to add an additional props for show/ hide some controls like the download or share button and some classNames prop to customize the colors?

These additional props would greatly enhance the flexibility and usability of the component for a wider range of applications. I believe other users might also benefit from these enhancements.

Thank you for considering my request. I am happy to provide more details or examples if needed.

Invalid Hook call

When using PreviewModal I got this error. Should we need to maintain this package with the latest React? This's really nice module

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem

Version: 1.3.7
React Version: 18.2.0