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. Currently, on file/folder reads are supported.

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

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.