ganadara135 / renderMediaFile

This is a React component that can render multi media files on a browser.

Notice

There are trouble in making a bundling on Webpack with React Hooks. So I change this as a class component. Next time I will try to insert rich control options such as tag colors and React-player controls.

Supporting File Types

pdf, mp4, mp3, jpg, jpeg, gif, png

Installation

React components is available as an npm package.

$ npm i @kcod/render-media-file

⌨️ Usage

Here is a quick example to get you started, it's all you need:

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import RenderMedia from '@kcod/render-media-file';

class App extends React.Component { 
  render() {
    return (
      <RenderMedia 
        fileInfo={{
          src:"https://user-images.com/sample.gif", 
          fileType:"image/gif"}} />
          // if you want to test pdf file, you can see CORS policy. So install Chrome extention program such 'Allow CORS'
          //src:"http://www.orimi.com/pdf-test.pdf",
          //src:"https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", 
          //fileType:"application/pdf"}} />
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Demo result

User Guide

Props

Prop name	Description	Default Value	Example Values
fileInfo	only props on this component and this has two atrributes, one is 'src' and the other is 'fileType'. src is the remote location addresses. fileType is MIME type	n/a	fileInfo={{ src:"http://example.com/sample.jpg", fileType:"image/png"}}