yo-fs

A client-side modular stream-friendly ui browser widget for navigating directories.

Usage no npm install needed!

<script type="module">
  import yoFs from 'https://cdn.skypack.dev/yo-fs';
</script>

README

yo-fs

A client-side modular, stream-friendly ui browser widget for navigating directories, built with yo-yo.

NPM

api

yofs(path, entries, onclick)

  • path: the directory or filename to display
  • entries: a list of entries with name, size, modified, createReadStream
  • onclick: fires when a folder, file, or back button is clicked.

example

var yofs = require('yo-fs')
var yo = require('yo-yo')

var entries = []

function onclick (event, entry) {
  console.log('i clicked', entry)
}

// only create the top-level element once
var el = yofs('/', entries, onclick)
document.body.appendChild(el)

// update the tree's internal html widget using yo
function update () {
  var fresh = tree.render('/', entries, onclick)
  yo.update(tree.widget, fresh)
}

var stream = //stream that gives me some data...

stream.on('data', function (entry) {
  entries.push(entry)
  update()
}