This project implements a File Explorer component using React, TypeScript, and CSS. The File Explorer component allows users to navigate through a file tree, view files and folders, and interact with them.
- Display files and folders in a hierarchical structure.
- Clicking on a folder expands/collapses it to show/hide its contents.
- Right-clicking on files and folders opens a context menu with options for copying, deleting, and renaming files (console logs the file name and action for now).
- Clone the repository:
git clone https://github.com/discrete-javascript/react-folder.git
- Navigate to the project directory:
cd react-folder
- Install dependencies && start:
yarn && yarn dev
- Import the
FileExplorer
component into your React application:
import FileExplorer from './FileExplorer';
-
Use the
FileExplorer
component in your application, passing the file tree data as props:<FileExplorer />
-
Optionally, you can customize the file tree data or styling of the File Explorer component according to your requirements.
The file structure data is provided in the Files
object, which defines a hierarchical structure of files and folders. You can find the file structure in the Files.ts
file.
- React.js
- TypeScript
- CSS
This project is licensed under the MIT License. See the LICENSE file for details.
- Configure the top-level `parserOptions` property like this:
```js
export default {
// other rules...
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
}