Seamless integration — Box UI Elements and React 18 compatibility

We know you’ve been waiting for this news, and we are excited to roll this out for you! Box UI Elements now support React 18, bringing a whole new level of flexibility and functionality for content collaboration in third-party apps. With this update, you can leverage the power of React 18’s cutting-edge features, drive innovation with latest frontend stack, while seamlessly integrating with the intelligent content cloud. 🚀

💡Currently, Box UI Elements support >=18.0.0 React versions. For developers who decide to stick with React 17, the package can still be updated to the newest version, since it is backwards compatible.

React 18 introduces several new features, new APIs and performance improvements. Some of the key highlights include:

• React Server Components — improving performance and reducing time-to-interactive for your applications.
• Automatic batching — multiple state updates triggered in a single event handler or lifecycle method will be batched together, resulting in improved performance.
• Enhancements to concurrent rendering, making it easier to build responsive user interfaces that can handle large amounts of data without blocking the main thread.
• New JSX transform — provides better runtime performance and smaller bundle sizes compared to previous versions.

For more details check the official overview of what’s new in React 18.

Existing projects with Box UI Elements

For existing projects based on React 17 or below, check the React migration guide for extensive information about how to start using React 18.

Once you upgrade React in your project, be sure to also update the box-ui-elements package with npm or yarn.

yarn add box-ui-elements

npm install box-ui-elements --legacy-peer-deps

This should result in updated version in the package.json file:

"box-ui-elements": "^21.0.0"

You’re all set! No additional changes related to Box UI Elements are required in your code.

Create a new project with Box UI Elements and React

To jumpstart a new project with Box UI Elements, you can use a sample demo portal. In the repository, you’ll find code for creating a simple financial document portal for an imaginary bank called Increo Financial, using Box UI elements. You can use this sample code as inspiration to begin further development of your own portal. Follow Alex Novotny’s post for comprehensive instructions on how to setup, clone, and deploy it.

Build a content portal using Box UI Elements, React, Tailwind CSS & Vercel Part 1

If you prefer to build the portal from scratch, you can setup a new app with Create React App:

npx create-react-app my-app
cd my-app
npm start

Adjust React version in thepackage.json file.

    "react": "18.0.0",
    "react-dom": "18.0.0",

Install the box-ui-elements package, we recommend using yarn.

yarn add box-ui-elements

npm install box-ui-elements --legacy-peer-deps

⚠️ Box UI Elements require some Please, do remember to also add peer dependencies. To prevent library duplication, the UI Elements require certain peer dependencies to be installed. For a list of required peer dependencies, see package.json. You can also try to use this command:

npx install-peerdeps box-ui-elements

Once you’re done with the installation steps, pick the UI component you want to include in your app. In this article, I featured the Content Explorer UI Element.

Box UI Elements use react-intl for internationalization. Check additional documentation for internalization Box UI Elelemts here.

npm i react-intl  --legacy-peer-deps

yarn add react-intl

You’ll need a Box custom app with OAuth 2.0 authentication. If you haven’t created one yet, check out Box’s developer guide for details and instructions. Make sure you generate the developer token; it can be found in the Box Developer Console in the configuration tab. Also, add your localhost address in the CORS section settings.

Once you have set up the Box app, you can add a chosen component to your project, following our React-agnostic approach. The snippet below features the Content Explorer element. Fill in the necessary variables, in this case: TOKEN and FOLDER_ID.

import logo from './logo.svg';
import './App.css';
import ContentExplorer from 'box-ui-elements/es/elements/content-explorer';
import { IntlProvider } from "react-intl";

function App() {
  return (
    <div className="App">
        <IntlProvider locale="en">
          <ContentExplorer
              contentPreviewProps={{
                  contentSidebarProps: {
                      detailsSidebarProps: {
                          hasProperties: true,
                          hasNotices: true,
                          hasAccessStats: true,
                          hasClassification: true,
                          hasRetentionPolicy: true,
                      },
                      hasActivityFeed: true,
                      hasMetadata: true,
                      hasSkills: true,
                      hasVersions: true,
                  },
              }}
              rootFolderId={FOLDER_ID}
              token={TOKEN}
            />
        </IntlProvider>
    </div>
  );
}

export default App;

For further documentation check Box UI Elements GitHub repository and developer documentation site.

Box AI for UI Elements

Box UI Elements have been recently enhanced with Box AI, giving opportunity for users to gain intelligent content insights. Check my blog post with a step-by-step guide on how to enable this feature in your own apps.

Enhance user experience with Box AI in Content Preview UI Element

Use Box UI Elements with other front-end frameworks

If you’re not using React in your project but still would like to include Box UI Elements in your app, we got you! Check my other posts featuring:

Box UI Elements with Angular

Box UI Elements with Vue 3

Combining the strength of React 18 with our versatile Box UI Elements will unlock endless possibilities for creating exceptional collaborative experiences. We’ll continue to work on further improvements. Follow Box Developer Blog to stay up to date!

We are looking forward to your feedback! Join our Box Developer Community for any questions related to Box UI Elements and knowledge sharing! 🦄

See you there!