@originvault/ov-content-viewer NPM

@originvault/ov-content-viewer🪟

OVContentViewer is a React component designed to display content in a versatile viewer. It supports full-screen mode, hover effects, and customizable rendering of resources. This component is particularly useful for displaying images and other media types in a user-friendly interface.

Features

Full-screen toggle functionality
Hoverable icons for additional actions
Customizable rendering of content
Support for dark mode
Responsive design for mobile devices

Installation

To use the OVContentViewer component in your project, follow these steps:

Install Dependencies: Make sure you have React and Material-UI installed in your project. If you haven't installed them yet, you can do so using npm or yarn:
```
npm install @mui/material @mui/icons-material
```
or
```
yarn add @mui/material @mui/icons-material
```
Add the Component: Import the OVContentViewer component into your desired file:
```
import { OVContentViewer } from '@originvault/ov-content-viewer';
```

Usage

Here’s a basic example of how to use the OVContentViewer component:

import React from 'react';
import { OVContentViewer } from '@originvault/ov-content-viewer';

const App = () => {
  return (
    <OVContentViewer
      did="your-did-here"
      src="your-image-url-here"
      title="Your Title"
      isDarkMode={false}
      hideOriginInfoIcon={false}
      type="image/png"
      alt="Description of the content"
      isFullScreen={false}
      setIsFullScreen={(isFullScreen) => console.log(isFullScreen)}
    />
  );
};

export default App;

Props

The OVContentViewer component accepts the following props:

Prop	Type	Description
`did`	`string`	The decentralized identifier for the content.
`size`	`"sm" \| "md" \| "lg"`	The size of the content viewer. Default is "md".
`title`	`string`	The title of the content viewer.
`render`	`(data: any) => React.ReactNode`	Custom render function for the content.
`renderProps`	`{ title?: string; onClose: () => void; validatedAt: Date \| null; }`	Props for the custom render function.
`resourceTypes`	`string[]`	Array of resource types to be rendered.
`resourceRenderer`	`(resource: any) => React.ReactNode`	Custom renderer for resources.
`isFullScreen`	`boolean`	Indicates if the viewer is in full-screen mode.
`setIsFullScreen`	`(isFullScreen: boolean) => void`	Function to toggle full-screen mode.
`isEmbedded`	`boolean`	Indicates if the viewer is embedded.
`isHoverable`	`boolean`	Indicates if hover effects are enabled.
`hideOriginInfoIcon`	`boolean`	Hides the origin info icon if true.
`src`	`string`	The source URL of the content to be displayed.
`type`	`string`	The MIME type of the content. Default is "image/png".
`alt`	`string`	Alternative text for the content.
`isDarkMode`	`boolean`	Indicates if dark mode is enabled.
`embeddedBackgroundColor`	`string`	Background color for embedded mode.
`isMobile`	`boolean`	Indicates if the viewer is being used on a mobile device.