{"id":24102088,"url":"https://github.com/in-ch/react-file-folder","last_synced_at":"2025-09-20T10:33:51.659Z","repository":{"id":182033745,"uuid":"663046014","full_name":"in-ch/react-file-folder","owner":"in-ch","description":"Easily and powerfully implement treeview UI in react.","archived":false,"fork":false,"pushed_at":"2024-03-17T14:12:34.000Z","size":5357,"stargazers_count":4,"open_issues_count":3,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-02T07:02:04.002Z","etag":null,"topics":["file-tree","folder","folder-viewer","npm","npm-module","react","reactjs","treeview"],"latest_commit_sha":null,"homepage":"https://in-ch.github.io/react-file-folder","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/in-ch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-06T12:44:13.000Z","updated_at":"2025-01-19T08:27:45.000Z","dependencies_parsed_at":"2024-10-01T00:00:57.646Z","dependency_job_id":"20a3efae-73f1-454d-a04e-52cbcb3683d6","html_url":"https://github.com/in-ch/react-file-folder","commit_stats":{"total_commits":49,"total_committers":2,"mean_commits":24.5,"dds":"0.020408163265306145","last_synced_commit":"76e11bb84278cf3799067f36d7cbc86c836b8071"},"previous_names":["in-ch/react-file-folder"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/in-ch%2Freact-file-folder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/in-ch%2Freact-file-folder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/in-ch%2Freact-file-folder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/in-ch%2Freact-file-folder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/in-ch","download_url":"https://codeload.github.com/in-ch/react-file-folder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252989670,"owners_count":21836662,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["file-tree","folder","folder-viewer","npm","npm-module","react","reactjs","treeview"],"created_at":"2025-01-10T17:35:16.296Z","updated_at":"2025-09-20T10:33:46.603Z","avatar_url":"https://github.com/in-ch.png","language":"HTML","readme":"# react-toggle-file-tree\n\nThe `react-toggle-file-tree` is designed to display a file/folder structure based on the provided list of files and their properties. \nThis component organizes the files into folders and subfolders based on their localPath. Each folder can contain multiple files with their respective fileName \n\n\n## Document\n---\n\n- [Installation](#installation)\n- [How to use](#how-to-use)\n- [Demos](#demos)\n- [Supported file types](#supported-file-types)\n- [Contribute](#contribute)\n\n\n## Installation \n---\n\nThis library use `react-toggle-file-tree`, so you need to install it.\n\n```bash\nnpm install --save react-toggle-file-tree\n```\n\nor\n\n```bash\nyarn add react-toggle-file-tree\n```\n\n\n## How to use\n---\n```tsx\nimport {\n  createFileTree,\n  Directory,\n  ToggleFileTree,\n} from 'react-toggle-file-tree';\n\n\u003cToggleFileTree\n    list={createFileTree(list) as Directory}\n    handleFileClick={handleFileClick}\n    handleDirectoryClick={handleDirectoryClick}\n/\u003e\n```\n\n⚠ The list must contain the localPath and fileName keys.\n\n\u003cdetails\u003e\n    \u003csummary\u003elist example view\u003c/summary\u003e\n\n```ts\n const list = [\n    {\n      localPath: '/',\n      fileName: 'inch.txt',\n      properties: {\n        size: '1 bit',\n        anything: 'possible',\n        a: 'b',\n      },\n    },\n    {\n      localPath: '/fruit',\n      fileName: 'apple.docs',\n      properties: {\n        sizezz: '12mb',\n        azvv: 'asdfasd',\n      },\n    },\n    {\n      localPath: '/fruit',\n      fileName: 'banana.png',\n      properties: {\n        sizezz: '12mb',\n        azvv: 'asdfasd',\n      },\n    },\n    {\n      localPath: '/vehicle/car',\n      fileName: 'truck.pdf',\n      properties: {\n        sizezz: '12mb',\n        azvv: 'asdfasd',\n      },\n    },\n    {\n      localPath: '/vehicle/car',\n      fileName: 'taxi.ppt',\n      properties: {\n        sizezz: '12mb',\n        azvv: 'asdfasd',\n      },\n    },\n    {\n      localPath: '/plant/tree',\n      fileName: 'oak.json',\n      properties: {\n        sizezz: '10mb',\n        azvv: 'asdfasd',\n      },\n    },\n    {\n      localPath: '/plant/tree',\n      fileName: 'maple.zip',\n      properties: {\n        sizezz: '8mb',\n        azvv: 'asdfasd',\n      },\n    },\n    {\n      localPath: '/plant/flower',\n      fileName: 'cherry-blossom.numbers',\n      properties: {\n        sizezz: '5mb',\n        azvv: 'asdfasd',\n      },\n    },\n    {\n      localPath: '/plant/fruit',\n      fileName: 'apple-tree.csv',\n      properties: {\n        sizezz: '15mb',\n        azvv: 'asdfasd',\n      },\n    },\n  ];\n```\n\u003c/details\u003e\n\n\n## Demos\n---\n![gif](https://github.com/in-ch/react-file-folder/assets/49556566/a96f28a3-7532-4d40-9ce8-29307b52c007)\n\n\n## Supported file types\n---\nThe `react-toggle-file-tree` supports the following file formats:\n\nDocuments: csv, docs, html, json, manifest, numbers, pdf, ppt, pptx, txt, xlsx\n\nImages: gif, jpg, jpeg, png\n\nMedia: mov, mp4\n\nScripts: js, ts\n\nCompressed: gif, zip\n\n\n## Example code\n---\n\nYou can see the example code and demo.\n\nClone the repository\n\n```bash\ngit clone https://github.com/in-ch/react-file-folder.git\n```\n\nInstall libraries\n\n```bash\ncd example\n```\n\nand\n\n```bash\nnpm install\n```\n\nor\n\n\n```bash\nyarn\n```\n\n\n## Contribute\n---\n\nYou can follow below to contribute `react-toggle-file-tree`\n\nClone the repository.\n\n```bash\ngit clone https://github.com/in-ch/react-file-folder.git\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fin-ch%2Freact-file-folder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fin-ch%2Freact-file-folder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fin-ch%2Freact-file-folder/lists"}