Modals

FileViewer
Storybook

The FileViewer component allows you to preview a variety of file types and provides the ability to download the previewed file, making it ideal for web applications that require file downloads.

Imports

To use the FileViewer component, import it as follows:

1import { FileViewer } from 'dd360-ds'

Usage

Use the FileViewer component as shown below:

The code snippet below shows how to use the FileViewer component:

1import {FileViewer} from 'dd360-ds''
2import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon'
3       
4<FileViewer>
5    <DynamicHeroIcon icon="DownloadIcon" className="h-5 w-5" />
6    <FileViewer.ViewerActions fileName='Eloquent_JavaScript.pdf'>
7        <FileViewer.BtnAction icon={<DynamicHeroIcon icon="DownloadIcon" className="h-5 w-5" />} onClick={() => alert('Demo Download')} />
8        <FileViewer.BtnAction icon={<DynamicHeroIcon icon="XIcon" className="h-5 w-5" />} onClick={() => alert('Close the FileViewer')} />
9    </FileViewer.ViewerActions>
10    <FileViewer.FileContent url='https://eloquentjavascript.net/Eloquent_JavaScript.pdf' fileType='pdf'/>
11</FileViewer>
12

API Reference

The FileViewer component supports the following props:

Name	Types	Default
"url"	string	-
"fileName"	string	-
"fileType"	string	-
"className"	string	-

Note

This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.

Modal