box-ui-elements
Version:
Box UI Elements
58 lines (52 loc) • 5.96 kB
Markdown
***IMPORTANT:*** The Content Preview UI Element works differently from the other UI Elements above. The React component is a wrapper for the [Preview library](https://developer.box.com/docs/box-content-preview). It also requires a language (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.
```jsx
<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>
```
<img src="https://user-images.githubusercontent.com/1075325/27419184-596b485c-56d4-11e7-8d42-c65328089c95.png" style="border: 1px solid #e8e8e8;" width="600" />
---
| Prop | Type | Default | Description |
|----------------------| --- | --- |-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| fileId* | string | | The id of the file to preview. |
| token* | string | | *See the [developer docs](https://developer.box.com/docs/box-content-preview#section-options).* |
| 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](https://developer.box.com/docs/box-content-preview#section-options).* |
| 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`. |
| hasProviders | boolean | `true` | Decide if it should wrap the element with the `Notification` and `Tooltip` Provider. Set this to false if you already wrap your app with both of these providers. |
| language | string | `en-US` | *See the [Internationalization](../README.md
| messages | Map<string, string> | | *See the [Internationalization](../README.md
| 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](https://developer.box.com/docs/box-content-preview#section-options).* |
| responseInterceptor | function | | *See the [developer docs](https://developer.box.com/docs/box-content-preview#section-options).* |
| sharedLink | string | | *See the [developer docs](https://developer.box.com/docs/box-content-preview#section-options).* |
| sharedLinkPassword | string | | *See the [developer docs](https://developer.box.com/docs/box-content-preview#section-options).* |
| showAnnotations | boolean | `true` | *See the [developer docs](https://developer.box.com/docs/box-content-preview#section-options).* |
***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.