An enhanced drop in replacement for Sandpack's FileExplorer. Providing immense flexibility to sandpack's capabilities.
npm install sandpack-file-explorer
yarn add sandpack-file-explorer
As a drop in replacement for Sandpack's FileExplorer, you can use it in the same way.
This means you must be running a custom Sandpack setup using the granular <SandpackProvider>
and <SandpackCodeEditor>
.
import {
SandpackProvider,
SandpackThemeProvider,
SandpackPreview,
SandpackCodeEditor,
SandpackStack,
SandpackLayout,
} from '@codesandbox/sandpack-react';
import { nightOwl } from '@codesandbox/sandpack-themes';
import { SandpackFileExplorer } from 'sandpack-file-explorer';
const MySandpackComponent = () => {
return (
<SandpackProvider template="react-ts">
<SandpackThemeProvider theme={nightOwl}>
<SandpackStack>
<SandpackLayout>
<div
style={{
display: 'flex',
width: '100%',
minHeight: '300px',
maxHeight: '300px',
backgroundColor: `var(--sp-colors-surface1)`,
}}
>
<div
style={{
minWidth: 150,
maxWidth: '300px',
overflow: 'hidden',
}}
>
<SandpackFileExplorer />
</div>
<div style={{ flex: 'min-content' }}>
<SandpackCodeEditor
wrapContent
style={{
minHeight: '100%',
maxHeight: '100%',
overflow: 'auto',
}}
showTabs
closableTabs
showInlineErrors
showLineNumbers
/>
</div>
</div>
<SandpackPreview />
</SandpackLayout>
</SandpackStack>
</SandpackThemeProvider>
</SandpackProvider>
);
};