react-file-widget is a highly customizable file viewing component that seamlessly integrates into your application. It supports multiple file formats, allowing you to configure which renderers to include, thereby optimizing your build size. Unused renderers are excluded from your bundle, saving space. Additionally, you can add custom renderers or override existing ones to suit your needs.

Features

• Multiple File Formats: Supports a wide range of file formats including images, videos, PDFs, and more.
• Customizable Renderers: Easily configure which renderers to include, optimizing your build size by excluding unused renderers.
• Custom Renderers: Add or override existing renderers to fit your specific needs.
• Theming: Supports both light and dark themes for better integration with your application.
• Responsive Design: Adjust the width, height, and maximum height of the component to fit different screen sizes.
• Header Customization: Option to hide the header or provide a custom header renderer function.
• Video Controls: Extensive video properties including autoplay, loop, mute, and more.
• Image Rendering: Choose between 'cover' and 'best-fit' modes for image rendering.
• PDF Viewing: Advanced PDF viewing options including pagination, zoom, rotation, and custom page controls.
• Twitch Integration: Embed Twitch streams with customizable parent domain.
• Class Names and Styles: Apply custom class names and styles to different slots for better styling control.

Installation

1// with npm
2npm i  react-file-widget
3
4// with yarn
5yarn add react-file-widget

Demo && Documentation

Demo and Documentation

Usage

Properties Table

Property	Possible Values	Description
file	RFW_File	At least url or file or (data and fileType) is required.
├── url	string	The URL of the file.
├── fileType	string	The type of the file (e.g., image/png, application/pdf).
├── data	string	The data of the file, typically in base64 format.
├── language	RFW_Languages	The language of the file content, if applicable.
├── title	string	The title of the file.
├── fileName	string	The name of the file.
├── file	File	The file object.
classNames	RFW_SlotsClassNames	Custom class names for different slots.
├── root	string	Class name for the root element.
├── header	string	Class name for the header element.
├── content	string	Class name for the content element.
├── videoContainer	string	Class name for the video container element.
├── playButton	string	Class name for the play button element.
├── error	string	Class name for the error element.
├── loading	string	Class name for the loading element.
slotProps	RFW_SlotStyleProps	Custom style properties for different slots.
├── root	CSSProperties	Style properties for the root element of the slot.
├── header	CSSProperties	Style properties for the header element of the slot.
├── content	CSSProperties	Style properties for the content element of the slot.
├── videoContainer	CSSProperties	Style properties for the video container element.
├── playButton	CSSProperties	Style properties for the play button element.
├── error	CSSProperties	Style properties for the error element.
├── loading	CSSProperties	Style properties for the loading element.
renderers	RFW_FileRenderer[]	Custom renderers for the file.
width	string	Width of the component.
height	string	Height of the component.
maxHeight	string	Maximum height of the component.
theme	`'light'	'dark'`
hideHeader	Boolean	Whether to hide the header. (default: false)
customHeader	(document: RFW_File, config: ContextProps) => ReactNode	Custom header renderer function.
videoProps		Properties for video.
├── hideControls	Boolean	Whether to hide video controls. (default: false)
├── muted	Boolean	Whether the video should be muted. (default: false)
├── autoplay	Boolean	Whether the video should autoplay. (default: false)
├── noCookie	Boolean	Whether to use no-cookie mode.
├── disableKeyBoard	Boolean	Whether to disable keyboard controls. (default: false)
├── hideFullScreen	Boolean	Whether to hide the full-screen button. (default: false)
├── loop	Boolean	Whether the video should loop. (default: false)
├── disableInlineOnMobile	Boolean	Whether to disable inline playback on mobile devices. (default: false)
├── start	number	The start time of the video in seconds.
├── disablePreLoad	Boolean	Whether to disable preloading of the video. (default: false)
├── poster	string	The URL of the poster image to be used as a thumbnail.
├── posterQuality	`'low'	'medium'
imageProps		Properties for image.
├── pictureMode	`'cover'	'best-fit'`
twitchProps		Properties for Twitch.
├── parent	string	The parent domain for the Twitch embed.
pdfProps		Properties for PDF.
├── currentPage	number	The current page number. (default: 0)
├── zoom	number	The zoom level.
├── paginated	Boolean	Whether the PDF should be paginated. (default: false)
├── mode	'single_page_view'	The mode to use for rendering the PDF. (default: single_page_view)
├── rotation	number	The rotation angle of the PDF.
├── onLoad	(totalPages: number) => void	Callback function to be called when the PDF is loaded.
├── hidePageSelector	Boolean	Whether to hide the page selector. (default: false)
├── pageSelectorPosition	`'left'	'right'
├── hidePageControls	Boolean	Whether to hide the page controls. (default: false)
├── hideZoomControls	Boolean	Whether to hide the zoom controls. (default: false)
├── hideRotateControls	Boolean	Whether to hide the rotate controls. (default: false)