Issue with using ContentPreview box-ui-elements React package

Hello, I am having issues using the box-ui-elements React package. I have gotten the other “simpler” react components to work correctly with a developer token, but for w/e reason the ContentPreview component never renders the preview of the file.

There are 0 errors in the console and if I enable the header it is able to display the file name correctly. So, the file ID is correct and the dev token is accurate since it works with other components on the same screen. Is this a known issue? It doesn’t seem like a sizing issue since it’s given plenty of space and the other components work just fine.

Is there a working example repo I could run and supply my dev token & file ID to and see if it works?

I ended up just using the raw JS CDN approach that some of the Docs outline to display the ContentPreview and that works just fine. So, I ended up just removing the entire box-ui-elements package since it wasn’t buying me much. I would like to actually use the package though since it is simpler to use theoretically. Having a “real” repository example or even a stackblitz example of using all the elements would help dramatically vs. the auto generated docs.

As a side note as well, it was rather annoying to track down the “latest” versions of all the CDN JS & CSS files for the different elements. Is there a list of this somewhere? They all seem to be independently versioned of each other and the docs just put in a placeholder x.x.x for the versions in the code snippets.

The “Picker” is at version 17.x.x (using 17.1.0) and the “Preview” is at 2.x.x (using 2.93.x). Which is rather confusing and hard to track down. Though possibly I was just looking in the wrong places.

Hi @zjkipping ,

You can find many code samples in our community GitHub repo.

Here are a few:

Specifically for the UI Elements there are also examples in the Box Platform CodePen

Here is the one for the preview element:

About your questions.

With no errors on the console, it is possible that the UI Element is not displaying at all. Try setting at least the height of the container for the UI Element, like the example above.

It is also common to overlook including the CORS domains in your Box app, but that will give you a CORS error on the console.

Sometimes an invalid access token also produces a CORS error, so check both.

As for the versions, the Preview element does not follow the same versioning conventions, the UI Elements teams plans to make it consistent.

Let us know if this helps.


Also, this page lists the versions of the UI Elements and should be up-to-date. If you (or anyone else) ever finds this not to be the case, please drop us a note in the developer experience feedback channel.

1 Like

Right so a lot of the codepens use the raw JS CDN instead of the React elements. So, it’s hard to translate it and have it be helpful. I mentioned I had no problem using the raw JS way of doing things so that seems to work very well. Just have issues using the React component itself. I did set a height, but the body of the preview literally just had 0 content to render. I wish there was an easy way to show this as I can’t get the package to work in stackblitz due to the large amount of dependencies that have to added on top of the package.

I might try to make a public repo on github I can show.

Perfect, thanks! The page looks familiar so it’s possible I found that later. I am mostly writing this forum post after the fact on an MVP I had written with a box integration.

1 Like

Having looked through the list you mentioned most of that is in Python and I am working in React. I have been mostly relying on this github and other random pages I can sort of find that mention the React setup for the ui-elements.

Thanks for sharing. Much appreciated!

1 Like

Hi @zjkipping

This one:

Is nodeJs and React:
Example: ui-elements-demo/src/Explorer-Simple.js at main · box-community/ui-elements-demo · GitHub

import * as React from 'react';

import ContentExplorer from 'box-ui-elements/es/elements/content-explorer';
import messages from 'box-ui-elements/i18n/en-US';

// Importing css related to the content explorer. More can be seen under the dist folder.
import 'box-ui-elements/dist/explorer.css';
import './Explorer.css'

class ExplorerSimple extends React.Component {

    render() {
        return (
            <div className='content'>
                <div className='nav-header'>
                    <h2>Explorer Simple</h2>

export default ExplorerSimple;