# filedrive

> Made with create-react-library

Latest version **0.0.1** (published 2022-03-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install filedrive
pnpm add filedrive
yarn add filedrive
bun add filedrive
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2022-03-02 |
| First published | 2022-03-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 104.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | whoanuragverma |
| Maintainers | whoanuragverma |

## Links

- npm: https://www.npmjs.com/package/filedrive
- Repository: https://github.com/whoanuragverma/filedrive
- Homepage: https://github.com/whoanuragverma/filedrive#readme
- Issues: https://github.com/whoanuragverma/filedrive/issues
- npm.io page: https://npm.io/package/filedrive

## Recent versions

- 0.0.1 (latest) — 2022-03-02

## README

## Documentation

There are serveral react hooks available for use in your components, these have been listed below.

### **useFileSystem()**

This hook is used to access the file system via the [FileSystemAPI](https://web.dev/file-system-access/). Currently, on file/folder reads are supported.

```js
const { ref, list, navigate, back, open, error } = useFileSystem()
```

| Key      | Type                                                                 | Description                                                                                                                  |
| -------- | -------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| ref      | `React.RefObject<HTMLButtonElement>`                                 | **(required)** This ref must me attached to a button element, upon click on that button popup will open to select directory. |
| list     | `List[]`                                                             | This contains the metadata about the current directory's file and folders.                                                   |
| navigate | `(name: string, handle: FileSystemDirectoryHandle) => Promise<void>` | This function is used to navigate to a new directory                                                                         |
| back     | `() => Promise<void>`                                                | This function is used to navigate back to the previous directory                                                             |
| open     | `(handle: FileSystemFileHandle) => Promise<void>`                    | This function will open the file in new tab, If the filetype is not supported by the browser it will be downloaded           |
| error    | `string`                                                             | This contains the error message if any error occurs                                                                          |

#### Example

```js
const App = () => {
	const { ref, list, navigate, back, open, error } = useFileSystem()

	return (
		<div>
			<button ref={ref}>OPEN FOLDER</button>
			<button onClick={back}>BACK</button>
			{error && <h1>Error: {error}</h1>}
			<ol>
				{list.map((item, idx) => (
					<li
						key={idx}
						onClick={() => {
							if (item.type === 'directory')
								navigate(item.name, item.handle)
							else open(item.fileHandle)
						}}
					>
						{item.name} - {item.type} - {item.size}
					</li>
				))}
			</ol>
		</div>
	)
}
```

Note: Once a folder has been opened, it can be accessed inside your application anywhere. The root folder is always globally accessible.

---
_Source: https://npm.io/package/filedrive · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._