# @whatsnextedu/content-viewer

> ---

Latest version **1.5.0** (published 2022-06-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @whatsnextedu/content-viewer
pnpm add @whatsnextedu/content-viewer
yarn add @whatsnextedu/content-viewer
bun add @whatsnextedu/content-viewer
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2022-06-02 |
| First published | 2022-06-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 39.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Mateo Maccarone |
| Maintainers | antomanzur, dboone |

## Links

- npm: https://www.npmjs.com/package/@whatsnextedu/content-viewer
- npm.io page: https://npm.io/package/@whatsnextedu/content-viewer

## Recent versions

- 1.5.0 (latest) — 2022-06-02

## README

# content-viewer
---

## Contents
- [About](#about)
- [Installation](#installation)
- [Usage](#usage)
- [Styling](#styling)
  - [Styled Component](#styled-component)
- [Current Renderer File Types](#current-renderer-file-types)
  - [Document](#document)
  - [Image](#image)
  - [Video](#video)
  - [Audio](#audio)
  - [Custom](#custom)
- [API](#api)
- [License](#license)

---

## About
A package that provides a React component to render standard files and media types for the users to view.

---

## Installation
```bash
 npm install https://github.com/whatsnextedu/content-viewer
 # or
 yarn add https://github.com/whatsnextedu/content-viewer
```

---

## Usage
```tsx
import { FileRender } from "content-viewer";

const App = () => {
  return <FileRender fileType={fileType} source={source} onError={() => setError()} />;
}

export default App
```

---

## Styling

### Styled Component
```tsx
import { FileRender } from "content-viewer";
import styled from "styled-components";

const StyledFileRender = styled(FileRender)`
  border: 1px solid red;
`;

const App = () => {
  return <StyledFileRender fileType={fileType} source={source} onError={() => setError()} />;
}

export default App
```

---

## Current Renderer File Types

### Document
| Extension | MIME Type                                                                 |
|-----------|---------------------------------------------------------------------------|
| doc       | application/msword                                                        |
| docx      | application/vnd.openxmlformats-officedocument.wordprocessingml.document   |
| ppt       | application/vnd.ms-powerpoint                                             |
| pptx      | application/vnd.openxmlformats-officedocument.presentationml.presentation |
| xls       | application/vnd.ms-excel                                                  |
| xlsx      | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet         |
| pdf       | application/pdf                                                           |
| rtf       | application/rtf                                                           |
| csv       | text/csv                                                                  |
| tsv       | text/tab-separated-values                                                 |

### Image
| Extension | MIME Type     |
|-----------|---------------|
| gif       | image/gif     |
| png       | image/png     |
| jpeg      | image/jpeg    |
| jpg       | image/jpg     |
| svg       | image/svg+xml |
| webp      | image/webp    |

### Video
| Extension | MIME Type       |
|-----------|-----------------|
| mp4       | video/mp4       |
| webm      | video/webm      |
| ogg       | video/ogg       |
| mov       | video/quicktime |

### Audio
| Extension | MIME Type |
|-----------|-----------|
| mp3       | audio/mp3 |
| wav       | audio/wav |
| ogg       | audio/ogg |
| m4a       | audio/m4a |

### Custom
| Extension | MIME Type      |
|-----------|----------------|
| YouTube   | custom/youtube |

---

## API

### FileRender props
| name     | type                                 |
|----------|--------------------------------------|
| fileType | `string`                             |
| source   | `string`                             |
 | onError  | `() => void`                         |
| size     | `{ height: string, width: string } ` |
---

## License

Licensed under the MIT License.

See [LICENSE](LICENSE) for more information.

---
_Source: https://npm.io/package/@whatsnextedu/content-viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._