sandpack-file-explorer
v0.0.7
Published
A file explorer for Codesandbox's 'sandpack' code editor
Downloads
1,113
Maintainers
Readme
Sandpack File Explorer
An enhanced drop in replacement for Sandpack's FileExplorer. Providing immense flexibility to sandpack's capabilities.
- Add and remove files or directories,
- Drag and drop to move files or directories,
- Allow users to customise the entire folder structure right within your website!
- Works out of the box with all of Sandpack's templates.
- Comes with default protection of the entry file (derived from package.json)
https://user-images.githubusercontent.com/17838632/208105414-5c7457bd-3bdc-4f24-b710-c152eb60d991.mov
Installation
npm install sandpack-file-explorer
yarn add sandpack-file-explorer
How do I use it?
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>
);
};