Getting started with Box UI Elements using REACT

Box UI Elements are pre-built UI components that allow developers to add elements 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.

Suppose you have some sort of web portal and need to manage documents for your users, or your customer is using Box.com and you need to integrate with it so they can access its features like sign, skills, etc.

UI Elements are a practical way to bring basic document management features from Box.com into your apps.

Need a file browser, a previewer, a way to upload files into a specific folder, explore the file metadata and add comments, or even a way to allow the user to select files and pass those reference into your app?

In this article, we will explore how to use the Explorer element in a REACT.js application.

Let’s get started.

Get a Box Developer Account

First you need to have a Box developer account.

If you already have one, you can skip ahead to the next step.

You may also skip this step if you have a standard Box account. Creating an application in the next step will upgrade your account to the developer type automatically.

Visit the developer account signup page. Fill out the text boxes and click Get Started.

You will receive a prompt to confirm your email address.

After clicking the confirmation url in your email, you will be taken to a login screen.

Once authenticated, you will see the Box Developer Console home screen.

Create a Box App

Visit the Box Developer Console.

Create a new application.

You’ll need to set up 2 factor authentication to make changes to apps.

In the configuration tab, make sure you have a Developer Token

The developer token is only valid for 1 hour.

Adjust your CORS Domains to match the URL from where you are running the app:

Start your REACT project

You can download this sample app from this repo.

Follow the instructions to install the Box UI Elements components into your project and install all the necessary dependencies.

UI Element: Content Explorer

The Content Explorer is an all-in-one component for your application users to interact with digital content stored in Box.

It can browse, search, preview, upload, download, delete, rename, create, and share files and folders.

Basics

The bare minimum you need to use the Content Explorer component is an access token, a language and internationalization messages.

For now, use the developer access token from the box app you generated.

Let me know in the comments if you would like to explore an OAuth 2.0 or JWT example.

All Box UI Elements support multiple languages and localization. Let’s explicitly load the messages and configure the element for English.

A minimalistic component:

Now, all you have to do is render this component in REACT. You should see something similar to:

Properties

The basic set of properties

The root folder id represents the folder above which the element can not navigate. Zero represents the root folder for the user.

Language and Messages represent the localization.

The current folder id represents the folder currently being displayed.

Logo URL represents the logo displayed. You can use a URL to an image. The string ‘box’ represents the Box logo.

A set of flags you can toggle on and off, which will enable or disable features or actions a user can perform:

Specifically for when the user previews a file, you can customize:

Events

If your application needs to keep track of what the user is doing, you can implement the Explorer events and pass context back.

Here is an example of an events implementation:

Putting it all together

You can get this sample app here. Once run, you’ll see:

Take a look at the events in the console of the browser.

The Content Explorer component also includes a previewer and a side bar to display extra information about a file.

And you can upload multiple files.

For more information, checkout our developer guides about UI Elements.

Now, you know how to use the Box Content Explorer with REACT. Try out the other UI Element types for yourself. Happy Building!