Gathering detailed insights and metrics for sandpack-file-explorer
Enhanced File Explorer for Sandpack. Providing immense flexibility to Sandpack's capabilities.
Installations
npm install sandpack-file-explorerDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Min. Node Version
>=14.0.0
Node Version
18.19.0
NPM Version
10.2.3
Score
51.9
Supply Chain
87.1
Quality
74.6
Maintenance
100
Vulnerability
99.1
License
Releases
5
Contributors
1
Unable to fetch Contributors
Languages
4
TypeScript
MDX
JavaScript
Shell
TypeScript (79.93%)
MDX (11.61%)
JavaScript (7.53%)
Shell (0.93%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
Download Statistics
Total Downloads
6,706
Last Day
14
Last Week
213
Last Month
747
Last Year
5,091
GitHub Statistics
MIT License
38 Stars
30 Commits
9 Forks
2 Watchers
2 Branches
1 Contributors
Updated on Feb 10, 2025
Maintainers
1
Package Meta Information
Latest Version
0.0.7
Package Id
sandpack-file-explorer@0.0.7
Unpacked Size
2.90 MB
Size
677.08 kB
File Count
8
NPM Version
10.2.3
Node Version
18.19.0
Published on
Dec 16, 2023
Total Downloads
Cumulative downloads
Total Downloads
6,706
Last Day
-69.6%
14
Compared to previous day
Last Week
10.9%
213
Compared to previous week
Last Month
15.3%
747
Compared to previous month
Last Year
253.3%
5,091
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Peer Dependencies
3
Dev Dependencies
43
@babel/core@codesandbox/sandpack-react@codesandbox/sandpack-themes@commitlint/cli@commitlint/config-conventional@ryansonshine/commitizen@ryansonshine/cz-conventional-changelog@storybook/addon-essentials@storybook/addon-storysource@storybook/react@storybook/react-vite@storybook/storybook-deployer@storybook/testing-library@types/jest@types/node@types/react@types/react-dom@types/react-test-renderer@typescript-eslint/eslint-plugin@typescript-eslint/parserbabel-loaderconcurrentlyeslinteslint-plugin-importeslint-plugin-jsx-a11yeslint-plugin-reacteslint-plugin-react-hookseslint-plugin-storybookeslint-plugin-typescript-sort-keyseslint-plugin-unused-importshuskyjestlint-stagedprettierreactreact-domreact-test-rendererrelease-itstorybookts-jesttsuptypescriptvite
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)
Installation
1npm install sandpack-file-explorer
1yarn 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>.
1import { 2 SandpackProvider, 3 SandpackThemeProvider, 4 SandpackPreview, 5 SandpackCodeEditor, 6 SandpackStack, 7 SandpackLayout, 8} from '@codesandbox/sandpack-react'; 9import { nightOwl } from '@codesandbox/sandpack-themes'; 10import { SandpackFileExplorer } from 'sandpack-file-explorer'; 11 12const MySandpackComponent = () => { 13 return ( 14 <SandpackProvider template="react-ts"> 15 <SandpackThemeProvider theme={nightOwl}> 16 <SandpackStack> 17 <SandpackLayout> 18 <div 19 style={{ 20 display: 'flex', 21 width: '100%', 22 minHeight: '300px', 23 maxHeight: '300px', 24 backgroundColor: `var(--sp-colors-surface1)`, 25 }} 26 > 27 <div 28 style={{ 29 minWidth: 150, 30 maxWidth: '300px', 31 overflow: 'hidden', 32 }} 33 > 34 <SandpackFileExplorer /> 35 </div> 36 <div style={{ flex: 'min-content' }}> 37 <SandpackCodeEditor 38 wrapContent 39 style={{ 40 minHeight: '100%', 41 maxHeight: '100%', 42 overflow: 'auto', 43 }} 44 showTabs 45 closableTabs 46 showInlineErrors 47 showLineNumbers 48 /> 49 </div> 50 </div> 51 <SandpackPreview /> 52 </SandpackLayout> 53 </SandpackStack> 54 </SandpackThemeProvider> 55 </SandpackProvider> 56 ); 57};
No vulnerabilities found.
No security vulnerabilities found.