We have all built or used web-based text and configuration tools. The absolute worst part of the user experience is the continuous download cycle. Want to save your progress? Click download. Need to make a quick adjustment? Download config (3).json again.

Modern browsers solve this with the File System Access API, which lets web applications read and write directly to files on the user's local disk. However, managing file handles, tracking reading/saving states, and handling user cancellations in React can introduce massive amounts of boilerplate.

In the latest release of react-hook-lab, we are excited to introduce the useFileSystem hook to handle all of this for you.

What is useFileSystem?

useFileSystem is a declarative, type-safe React hook that wraps the browser's native File System Access API. It allows you to prompt users to open a file, read its content directly into your state, and continuously write changes back to that same file on disk without prompting for re-downloads.