README.md

Demo (Documentation)

IMPORTANT: The Content Preview UI Element works differently from the other UI Elements above. The React component is a wrapper for the Preview library. It also requires a langauge (defaults to en-US) to be passed in since the preview library bundles are localized. Providing a language will automatically pull in the corresponding preview.js bundle and dynamically load it by adding a script tag. It will also dynamically load the additional required preview.css file by adding a link tag.

var ContentPreview = require('./ContentPreview').default;

<IntlProvider locale="en">
    <ContentPreview
        contentSidebarProps={{
            detailsSidebarProps: {
                hasAccessStats: true,
                hasClassification: true,
                hasNotices: true,
                hasProperties: true,
                hasRetentionPolicy: true,
                hasVersions: true,
            },
            features: FEATURES,
            hasActivityFeed: true,
            hasMetadata: true,
            hasSkills: true,
            hasVersions: true,
        }}
        hasHeader={true}
        features={FEATURES}
        fileId={FILE_ID}
        token={TOKEN}
        {...PROPS}
    />
</IntlProvider>

Screenshot

---

Props

Prop	Type	Default	Description
fileId*	string		The id of the file to preview.
token*	string		See the developer docs.
canDownload	boolean	true	Visually hides the download and print buttons in the preview header if this is set to false. This prop has no effect when the file permission can_download is set to false.
collection	Array<string>	[]	See the developer docs.
contentOpenWithProps	Object	{}	Props that can be forwarded to the Content Open With UI Element. See them in the props section of Content Open With UI Element
contentSidebarProps	Object	{}	Props that can be forwarded to the Content Sidebar UI Element. See them in the props section of Content Sidebar UI Element
hasHeader	boolean	true	Visually hides the preview header if this is set to false.
language	string	en-US	See the Internationalization section
messages	Map<string, string>		See the Internationalization section
onClose	function		Callback function for when the file preview closes. If absent, the close button will not render in the header.
onLoad	function		Callback function for when a file preview loads.
requestInterceptor	function		See the developer docs.
responseInterceptor	function		See the developer docs.
sharedLink	string		See the developer docs.
sharedLinkPassword	string		See the developer docs.
showAnnotations	boolean	true	See the developer docs.

Note: Any other option listed here https://github.com/box/box-content-preview#parameters--options, which is also not listed or overriden above as a prop, will be passed on as-is to the Preview Library.