Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/urfdvw/react-local-file-system
Tools for your react front end web app to access local files via File System API.
https://github.com/urfdvw/react-local-file-system
file-system-api react
Last synced: about 2 months ago
JSON representation
Tools for your react front end web app to access local files via File System API.
- Host: GitHub
- URL: https://github.com/urfdvw/react-local-file-system
- Owner: urfdvw
- License: apache-2.0
- Created: 2023-08-29T22:43:28.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-19T20:30:59.000Z (8 months ago)
- Last Synced: 2024-10-10T22:45:31.348Z (2 months ago)
- Topics: file-system-api, react
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-local-file-system
- Size: 2.09 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-local-file-system
This package contains tools for your react front end web app to access local files via File System API.
This package only supports Chrome and Chromium-based browsers.
## Install
```
npm i react-local-file-system
```
## Quick setup
The minimal setup to use this package is to utilize the `FolderView` component for general file operations and to create a custom handler function, `onFileClick`, to manage any file click actions. Specifically, the `FolderView` component is used in the UI to access files, accepting a prop named `onFileClick` that takes a single parameter: `fileHandle`. The `onFileClick` function is triggered when a file is clicked in the UI, with `fileHandle` being the file handle of the clicked file.
Code example:
```js
import FolderView, { useFileSystem, getFileText } from "react-local-file-system";
export default function App() {
// get folder handler and status with useFileSystem hook
const { openDirectory, directoryReady, statusText, rootDirHandle } = useFileSystem();
// example onFileClick handler
async function onFileClick(fileHandle) {
console.log("file content of", fileHandle.name, ":", await getFileText(fileHandle));
}
// Show FolderView component only when its ready
return directoryReady ? (
) : (
<>
Open Dir
{statusText}
>
);
}
```
## Demo
The live demo of the example above is here:
https://urfdvw.github.io/react-local-file-system/
For the code of the live demo, please see the `demo` branch
## Contents
### `FolderView` component
Supported operations
- view
- click on file to trigger `onFileClick` function
- click on folder to open
- click on folder in the path to go back
- context menu
- rename
- duplicate
- remove
- add
- add new file
- add new folder
- drag and drop on to folder
- move file or folder
### `useFileSystem` hook
returned objects
- methods:
- `openDirectory`: function handle to open a directory, or switch to a new directory
- `path2FolderHandles`: given a directory path (`string`) return a folder handle
- values:
- `rootDirHandle`: the folder handle of the opened folder
- `directoryReady`: `boolean` indicator of whether the folder handles in the hook are ready to be used
- `statusText`: `string` text indicator of status of the folder handles.
### fileSystem util functions
functions
- file level
- `writeFileText(fileHandle, text) -> void`: write text to a file
- `getFileText(fileHandle) -> string`: read text from a file
- folder level (docs coming, please see source code for help at the moment)
## PeerDependency
```
"@mui/icons-material": "^5.14.13",
"@mui/material": "^5.14.13",
"react": "^18.2.0",
"react-dom": "^18.2.0"
```