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 box-ui-kit-feedback@box.com 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
;;;;; const getLocalizedMessage = messagesid; ;
Content Picker
File Picker
;;;;; const getLocalizedMessage = messagesid; ;
Folder Picker
;;;;; const getLocalizedMessage = messagesid; ;
Content Uploader
;;;;; const getLocalizedMessage = messagesid; ;
Content Tree
;;;;; const getLocalizedMessage = messagesid; ;
Content Preview
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.
;;; ;
Support
Need to contact us directly? Email oss@box.com 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.