@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:

1. 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

2. 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. |

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.

Acknowledgments

• React
• Material-UI