import React, { useEffect } from "react";
import { useHandleBoxToken } from "~/hooks";
const BoxClass = (props) => {
const [viewChanged, setViewChanged] = React.useState(0);
useEffect(() => {
// start the Explorer
let contentExplorer = new Box.ContentExplorer();
// Show the content explorer
contentExplorer.show(props.rootFolderId, props.token, {
container: `.content-explorer___${props.entityId}`,
...(props?.isMobile && {
// [NOTE]: we need this hack because the prop documented by Box is not working
// hide some action if is mobile
canDownload: false, // hide link in drop-down menuy
onPreview: () => {
setTimeout(() => {
// wait for print icon
const controls = document.querySelector(
".bcpr-PreviewHeader-controls",
);
[...(controls?.children ?? [])].forEach(function (el) {
// get headers buttons
if (!el.classList.contains("bcpr-PreviewHeader-button-close"))
el.style.display = "none"; // remove all actions but the close button
});
}, 100);
},
}),
contentUploaderProps: {
isFolderUploadEnabled: true,
fileLimit: 500,
},
canShare: false,
logoUrl: "",
canDelete: props.canDelete === undefined ? true : props.canDelete,
canRename: props.canRename === undefined ? true : props.canRename,
canUpload: props.canUpload === undefined ? true : props.canUpload,
canCreateNewFolder:
props.canCreateNewFolder === undefined
? true
: props.canCreateNewFolder,
responseInterceptor: (response) => {
const { data } = response;
if (data.name && !data.parent?.etag && !data.parent?.sequence_id) {
data.name = props.entityName;
}
if (data.modified_by) {
data.modified_by = {};
}
if (data.parent) {
data.parent.name = props.entityName;
}
if (data?.item_collection?.entries) {
data.item_collection.entries = data.item_collection.entries.map(
(item) => {
if (item.modified_by) {
item.modified_by = {};
}
if (item.parent.name) {
item.parent.name = props.entityName;
}
if (item.path_collection?.entries[1]?.name) {
item.path_collection.entries[1].name = props.entityName;
}
return item;
},
);
}
if (data.entries) {
data.entries = data.entries.map((item) => {
if (item.modified_by) {
item.modified_by = {};
}
if (item.parent.name) {
item.parent.name = props.entityName;
}
if (item.path_collection?.entries[1]?.name) {
item.path_collection.entries[1].name = props.entityName;
}
return item;
});
}
if (data.path_collection?.entries[1]?.name) {
data.path_collection.entries[1].name = props.entityName;
}
setViewChanged((prev) => prev + 1);
return response;
},
});
if (props.onSearchActive) {
const searchElements = document.getElementsByClassName("be-search");
if (searchElements?.length) {
const inputChild = searchElements[0].firstChild;
if (inputChild)
inputChild.addEventListener("focus", props.onSearchActive);
}
}
}, [
props.rootFolderId,
props.token,
props.entityId,
props.isMobile,
props.canDelete,
props.canRename,
props.canUpload,
props.canCreateNewFolder,
props.entityName,
props.onSearchActive,
]);
useEffect(() => {
setTimeout(() => {
const breadCrumbs = document.getElementsByClassName(
"bdl-Breadcrumb-title",
);
if (breadCrumbs?.[0]) {
breadCrumbs[0].innerHTML = props.entityName;
}
}, 1);
}, [viewChanged]);
return (
<div
className={`content-explorer___${props.entityId} box-documents-container`}
></div>
);
};
export default (props) => {
const [boxScriptLoaded, setBoxScriptLoaded] = React.useState(false);
const { token, loading } = useHandleBoxToken(props?.token);
const { isMobile } = props || {};
React.useEffect(() => {
const boxScriptLoadedInterval = setInterval(() => {
if (
typeof Box != typeof undefined &&
"ContentExplorer" in (Box || {}) &&
"Preview" in (Box || {})
) {
setBoxScriptLoaded(true);
clearInterval(boxScriptLoadedInterval);
}
}, 500);
return () => {
clearInterval(boxScriptLoadedInterval);
};
}, []);
if ((!isMobile && ((!token && !props.token) || loading)) || !boxScriptLoaded)
return <p className="text-sm h-screen">Connecting to folder....</p>;
return <BoxClass key={props.token} {...props} token={props.token} />;
};
Environment:
React with vite, using script to load box explorer
Desktop (please complete the following information):
Steps to reproduce the problem:
What is the expected behavior? (Screenshots can be helpful here)
Folder should be renamed in real time.
What went wrong? (Screenshots, console logs, or HAR files can be helpful here)
Screen.Recording.2025-08-12.at.9.44.43.PM.mov
Link to application or sample code: