box-content-ui-kits

Box Content UI Kits

The Box Content UI Kits are currently in beta and may contain bugs. Their interfaces may also update as needed. Please email [e-mail] to report issues or provide feedback.

Installation

yarn add box-content-ui-kits

Usage

Please follow the documentation links below if you would like to use the UI kits as library includes. Examples below show how to import UI kits into your React based app.

Authentication

We have designed the UI kits in an authentication-type agnostic way so whether you are using UI kits for users who have Box accounts (Managed Users) or non-Box accounts (App Users), UI Kits should just work out of the box. The UI Kits only expect a token to be passed in for authentication, and Box provides two different ways to generate tokens - OAuth and JWT. So depending on which type of app you are building, follow the linked authentication guides above on how to initiate auth and retrieve tokens.

CSS

The Box Content UI Kits require their corresponding CSS stylesheet to render properly. This will require setting up webpack's style-loader / css-loader plugins to properly process that CSS if you import it as shown in the examples below. Alternatively, you can just include the CSS file in your apps's HTML without importing it into javascript.

Components

You can import the ContentExplorer, ContentPicker (FilePicker / FolderPicker), ContentUploader, ContentPreview or ContentTree. Likewise you can also import ContentPickerPopup (FilePickerPopup / FolderPickerPopup), ContentUploaderPopup or ContentTreePopup which are popup versions for the picker, uploader and content tree respectively. Examples:

Content Explorer

Documentation

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

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

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

Content Picker

Documentation

File Picker

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

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

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

Folder Picker

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

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

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

Content Uploader

Documentation

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

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

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

Content Tree

Documentation

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

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

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

Content Preview

Documentation

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

import React from 'react';
import { render } from 'react-dom';
import { ContentPreview } from 'box-content-ui-kits';

render(
    <ContentPreview
        id={id}
        locale='en-US'
        token={token}
    />,
    document.querySelector('.container')
);

Support

Need to contact us directly? Email [e-mail] and be sure to include the name of this project in the subject.

Copyright and License

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 Kit 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.