Box UI Elements are pre-built UI components that allow developers to add features of the main Box web application into their own applications. They can be used to navigate through, upload, preview, and select content stored on Box and are available both as React components and framework-agnostic JavaScript libraries.

The instructions below describe how to use the UI Elements in a React application. If instead you would like to include the framework-agnostic libraries as scripts, refer to our developer documentation. Continue reading below for how to import the UI Elements as React components. You can also reference https://github.com/box/box-ui-elements-demo or https://github.com/box/box-content-preview-demo for minimal React applications using the Explorer UI Element and Preview UI Element respectively.

yarn add box-ui-elements or npm install box-ui-elements

• Desktop Chrome, Firefox, Safari, Edge (latest 2 versions)
• Limited support for Internet Explorer 11 (requires ES2015 polyfill)
• Mobile Chrome and Safari

en-AU, en-CA, en-GB, en-US, da-DK, de-DE, es-ES, fi-FI, fr-CA, fr-FR, it-IT, ja-JP, ko-KR, nb-NO, nl-NL, pl-PL, pt-BR, ru-RU, sv-SE, tr-TR, zh-CN, zh-TW

The NPM package includes translated messages for the above locales. See the examples below on how to reference them. You can also use your own translated messages since the components are essentially locale free and only require a getLocalizedMessage function to be passed in. The getLocalizedMessage function in the examples below accepts a string message id and returns a formatted string after some optional string replacements. Alternatively, if your React app is using the popular react-intl library, you can instead use formatmessage to do the replacements.

We have designed the Box UI Elements in an authentication-type agnostic way. Whether you are using them for users who have Box accounts (Managed Users) or non-Box accounts (App Users), they should just work out of the box. They only expect an access token to be passed in for authentication. The developer documentation contains more information on how to generate and use these access tokens.

The Box UI Elements require their corresponding CSS stylesheets to render properly. You will need to set up Webpack's style-loader and css-loader in order to properly include the CSS like in the examples below. Alternatively, you can include the appropriate CSS files in your application's HTML without importing it in React. Links to hosted versions of these CSS files on the Box CDN can be found in the documentation links below.

You can import the ContentExplorer, ContentPicker, ContentUploader, ContentPreview or ContentTree. Similarly, you can also import the ContentPickerPopup, ContentUploaderPopup or ContentTreePopup which are popup versions for the Content Picker, Content Uploader and Content Tree, respectively.

import React from 'react';
import { render } from 'react-dom';
import { ContentExplorer } from 'box-ui-elements';
import messages from 'box-ui-elements/lib/i18n/en-US';
import 'box-ui-elements/dist/explorer.css';

const token = 'ACCESS_TOKEN';
const getLocalizedMessage = (id, replacements) =>
    messages[id].replace(/{\s*(\w+)\s*}/g, (match, key) => replacements[key]);

render(
    <ContentExplorer
        token={token}
        getLocalizedMessage={getLocalizedMessage}
    />,
    document.querySelector('.container')
);

See the developer docs.

import React from 'react';
import { render } from 'react-dom';
import { ContentPicker } from 'box-ui-elements';
import messages from 'box-ui-elements/lib/i18n/en-US';
import 'box-ui-elements/dist/picker.css';

const token = 'ACCESS_TOKEN';
const getLocalizedMessage = (id, replacements) =>
    messages[id].replace(/{\s*(\w+)\s*}/g, (match, key) => replacements[key]);

render(
    <ContentPicker
        token={token}
        getLocalizedMessage={getLocalizedMessage}
    />,
    document.querySelector('.container')
);

See the developer docs.

import React from 'react';
import { render } from 'react-dom';
import { ContentUploader } from 'box-ui-elements';
import messages from 'box-ui-elements/lib/i18n/en-US';
import 'box-ui-elements/dist/uploader.css';

const token = 'ACCESS_TOKEN';
const getLocalizedMessage = (id, replacements) =>
    messages[id].replace(/{\s*(\w+)\s*}/g, (match, key) => replacements[key]);

render(
    <ContentUploader
        token={token}
        getLocalizedMessage={getLocalizedMessage}
    />,
    document.querySelector('.container')
);

import React from 'react';
import { render } from 'react-dom';
import { ContentTree } from 'box-ui-elements';
import messages from 'box-ui-elements/lib/i18n/en-US';
import 'box-ui-elements/dist/tree.css';

const token = 'ACCESS_TOKEN';
const getLocalizedMessage = (id, replacements) =>
    messages[id].replace(/{\s*(\w+)\s*}/g, (match, key) => replacements[key]);

render(
    <ContentTree
        token={token}
        getLocalizedMessage={getLocalizedMessage}
    />,
    document.querySelector('.container')
);

The Box Content Preview has a slightly different interface than the other components. Instead of importing localizations like in the examples above, it requires a locale (defaults to en-US) to be passed in. This will automatically pull in the corresponding preview bundle and dynamically load it. It will also dynamically load the additional required CSS file needed for preview.

import React from 'react';
import { render } from 'react-dom';
import { ContentPreview } from 'box-ui-elements';
import 'box-ui-elements/dist/preview.css';

const token = 'ACCESS_TOKEN';
const fileId = 'FILE_ID';

render(
    <ContentPreview
        fileId={fileId}
        token={token}
    />,
    document.querySelector('.container')
);

If you have any questions, please visit our developer forum or contact us via one of our available support channels.

Copyright 2016-2017 Box, Inc. All Rights Reserved.

Licensed under the Box Software License Agreement v.20170516. You may not use this file except in compliance with the License. You may obtain a copy of the License at Box UI Elements Software License Agreement

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.