@yfs/react NPM

YFS

Synchronize text files between the browser and the file system using the File System Access API and Yjs.

Installation

To get started, install the @yfs/react package via npm or yarn:

# npm
npm install @yfs/react

# Yarn
yarn add @yfs/react

Usage

Example:

import React, { useState } from 'react'
import * as Y from 'yjs'
import useYFS from '@yfs/react'

function Editor () {
  const { setRootDirectory, directoryName, syncDoc } = useYFS()
  const [doc] = useState<Y.Doc>(new Y.Doc())

  return (
    <div>
      <button
        onClick={() => {
          if (!directoryName) {
            setRootDirectory(true)
          } else {
            syncDoc('my-file.md', doc)
          }
        }}
      >
        Sync
      </button>
      {/* Editor code... */}
    </div>
  )
}