---

Exploration

Primitives for creating high performance file explorers with React

npm i exploration

---

Features

• [x] Zero-recursion, expandable tree
• [x] Virtualization, only render what is visible
• [x] Create/delete/move/rename actions
• [x] Drag and drop
• [x] Hotkeys
• [x] Multiselect
• [x] Traits, add class names to selections, focused elements, anything
• [x] Filtering/search
• [x] Tree snapshot restoration for persisting the expanded state of the tree between refreshes
• [x] Strongly typed so you can engineer with confidence
• [x] Concurrent mode safe, ready for React 18

---

The problem

File explorers in React tend to be large, slow, and opinionated. They usually peter out at a hundred nodes and aren't suitable for building a complex file explorer in the browser. Other solutions like Aspen aimed to solve this problem by using typed arrays (which don't seem to offer much benefit in performance) and event-driven models. They did a pretty job, however, the documentation was sparse and the code was verbose. All that said, Aspen and Monaco's tree were huge inspirations.

The solution

With this library I tried to solve all of those problems. It's built on plain JavaScript arrays, well-designed data structures, an event-driven model, and concurrent mode-safe React hooks. It does just enough to be extremely powerful without being opinionated about styles, hotkeys, or traits. It's also performant enough to be used in browser integrated development environments. It makes sure React only renders what changes without render thrashing.

Most importantly - it's easy to use. So check out the recipes below and give it a try!

---

Recipes

☀︎ Coming soon

1. How to create a new file or directory to the tree
2. How to delete a file or directory from the tree
3. How to rename a file
4. How to implement drag 'n drop with multiselect
5. How to add traits to files/directories
6. How to add your own hotkeys
7. How to do perfom an action when a file is selected (opened)
8. How to filter the list of visible files/directories
9. How to write your own file tree plugin
10. How to restore the state of the file tree from local storage

---

React API

createFileTree()

Create a file tree that can be used with the React API.

Arguments

Name	Type	Required?	Description
getNodes	GetNodes<Meta>	Yes	A function that returns the nodes of the file tree.
config	FileTreeConfig<Meta>	No	Configuration options for the file tree.

GetNodes

type GetNodes<Meta> = {
  /**
   * Get the nodes for a given directory
   *
   * @param parent - The parent directory to get the nodes for
   * @param factory - A factory to create nodes (file/dir) with
   */
  (parent: Dir<Meta>, factory: Omit<FileTreeFactory<Meta>, "createPrompt">):
    | Promise<FileTreeNode<Meta>[]>
    | FileTreeNode<Meta>[];
};

FileTreeConfig

type FileTreeConfig<Meta> = {
  /**
   * A function that compares two nodes for sorting.
   */
  comparator?: FileTree["comparator"];
  /**
   * The root node data
   */
  root?: Omit<FileTreeData<Meta>, "type">;
  /**
   * Restore the tree from a snapshot
   */
  restoreFromSnapshot?: FileTreeSnapshot;
};

Returns FileTree

⇗ Back to top

---

useVirtualize()

A hook similar to react-window's FixedSizeList component. It allows you to render only enough components to fill a viewport, solving some important performance bottlenecks when rendering large lists.

Arguments

Name	Type	Required?	Description
fileTree	FileTree<Meta>	Yes	A file tree
config	UseVirtualizeConfig	Yes	Configuration options

UseVirtualizeConfig

Name	Type	Required?	Description
windowRef	WindowRef	Yes	A React ref created by useRef() or an HTML element for the container viewport you're rendering the list inside of.
nodeHeight	number	Yes	The fixed height (in px) of each node in your list.
nodeGap	number	No	Optionally set a gap (in px) between each node in your list.
nodes	number[]	No	When using a hook like useFilter you can supply the filtered list of nodes to this option. By default, useVirtualize() uses the nodes returned by useVisibleNodes()
overscanBy	number	No	This number is used for determining the number of nodes outside of the visible window to render. The default value is 2 which means "render 2 windows worth (2 * height) of content before and after the items in the visible window". A value of 3 would be 3 windows worth of grid cells, so it's a linear relationship. Overscanning is important for preventing tearing when scrolling through items in the grid, but setting too high of a value may create too much work for React to handle, so it's best that you tune this value accordingly.
ResizeObserver	ResizeObserver	No	This hook uses a ResizeObserver for tracking the size of the viewport. If you need to polyfill ResizeObserver you can provide that polyfill here. By default, we use the ResizeObserver from the window global.

Returns UseVirtualizeResult

interface UseVirtualizeResult<Meta> {
  /**
   * The current scroll position of the viewport
   */
  scrollTop: number;
  /**
   * `true` if the viewport is currently scrolling
   */
  isScrolling: boolean;
  /**
   * Scroll to the viewport a given position
   * @param scrollTop - The new scroll position
   * @param config - Configuration options
   */
  scrollTo(
    scrollTop: number,
    config: Pick<ScrollToNodeConfig, "behavior">
  ): void;
  /**
   * Scroll to a given node by its ID
   * @param nodeId - The node ID to scroll to
   * @param config - Configuration options
   */
  scrollToNode(nodeId: number, config?: ScrollToNodeConfig): void;
  /**
   * Props that should be applied to the container you're mapping your virtualized
   * nodes into.
   */
  props: VirtualizeContainerProps;
  /**
   * Calls a defined render function on each node and returns an array that
   * contains the resulting React elements.
   *
   * @param render - A callback that renders a node.
   */
  map(
    render: (config: VirtualizeRenderProps<Meta>) => React.ReactElement
  ): React.ReactElement[];
}

interface VirtualizeRenderProps<Meta> {
  /**
   * A stable key as required by React elements that are included in arrays
   */
  key: number;
  /**
   * The index of the node within the list of visible nodes
   */
  index: number;
  /**
   * A file tree node
   */
  node: FileTreeNode<Meta>;
  /**
   * The file tree that contains the node
   */
  tree: FileTree<Meta>;
  /**
   * Styles that need to be applied to the node element
   */
  style: React.CSSProperties;
}

⇗ Back to top

---

<Node>

A React component that renders a node in a file tree with plugins. This can be directly paired with the useVirtualize() hook.

Node Props

Name	Type	Required?	Description
as	React.ComponentType<React.HTMLAttributes<HTMLElement>>	No	Render the node as this component. Defaults to "div".
node	FileTreeNode<Meta>	Yes	A file tree node
index	number	Yes	The index of the node within the file tree list of visible nodes
tree	FileTree<Meta>	Yes	The file tree that contains the node
style	React.CSSProperties	Yes	Styles to apply to the <div> element
children	React.ReactNode	Yes	Children to render within the node

⇗ Back to top

---

useNode()

A plugin that creates and memoizes node-specific props.

Arguments

Name	Type	Required?	Description
fileTree	FileTree<Meta>	Yes	A file tree
config	Pick<NodeProps<Meta>, "node" | "index" | "style">	Yes	Options to generate node-specific props from

---

useVisibleNodes()

A hook that observes to updates to the file tree and returns the nodes that are currently visible in the file tree.

Arguments

Name	Type	Required?	Description
fileTree	FileTree<Meta>	Yes	A file tree

⇗ Back to top

---

useNodePlugins()

A hook that observes to plugins and retrieves props that should be applied to a given node. An example of a plugin wouuld be the useTraits() hook. The <Node> component uses this under the hood.

Arguments

Name	Type	Required?	Description
nodeId	number	Yes	The node ID used to retrieve props from a plugin
plugins	NodePlugin[]	Yes	A list of file tree plugins

NodePlugin

type NodePlugin<T = unknown> = {
  /**
   * A subject that the `useNodePlugins()` hook will observe to.
   */
  didChange: Subject<T>;
  /**
   * A function that returns React props based on a node ID.
   *
   * @param nodeId - The ID of a node in the file tree.
   */
  getProps(nodeId: number): React.HTMLAttributes<HTMLElement>;
};

⇗ Back to top

---

useFilter()

A hook that returns filtered visible nodes based on a filter function.

Arguments

Name	Type	Required?	Description
fileTree	FileTree<Meta>	Yes	A file tree
filter	((node: FileTreeNode<Meta>, i: number) => boolean) | null	Yes	A stable callback (e.g. useCallback(() => {}, [])) that returns true if the node should be visible. This needs to be memoized or hoisted to the top level to ensure the filtered nodes only get re-generated when the filter changes or the file tree's visible nodes change.

⇗ Back to top

---

useTraits()

A plugin hook that allows you to arbitrarily apply traits/decorations to nodes in the file tree. For example, if you wanted to add a class name to a node in the tree if it were selected, focused, et. al. you could use this hook to do that. Another example would be the M modified decorations in VSCode.

Arguments

Name	Type	Required?	Description
fileTree	FileTree<Meta>	Yes	A file tree
traits	string[]	Yes	The list of available traits that can be applied to nodes

Returns UseTraitsPlugin

interface UseTraitsPlugin<Trait> {
  /**
   * A subject that you can use to observe to changes to traits.
   */
  didChange: Subject<Map<string, Set<number>>>;
  /**
   * Get the React props for a given node ID.
   *
   * @param nodeId - A node ID
   */
  getProps(nodeId: number): TraitsProps;
  /**
   * Adds a trait to given node IDs
   *
   * @param trait - The trait to apply to the given node IDs
   * @param nodeIds - Node IDs to add the traits to
   */
  add(trait: Extract<Trait, string>, ...nodeIds: number[]): void;
  /**
   * Sets node IDs to a given trait. This is different from add in
   * that it replaces any exist node IDs assigned to the trait.
   *
   * @param trait - The trait to apply to the given node IDs
   * @param nodeIds - Node IDs to add the traits to
   */
  set(trait: Extract<Trait, string>, nodeIds: number[]): void;
  /**
   * Deletes a node ID from a given trait
   *
   * @param trait - The trait
   * @param nodeId - The node ID to delete a trait for
   */
  delete(trait: Extract<Trait, string>, nodeId: number): void;
  /**
   * Clears all of the node IDs assigned to a given trait
   *
   * @param trait - The trait
   */
  clear(trait: Extract<Trait, string>): void;
  /**
   * Clears all of the node IDs assigned to all traits
   */
  clearAll(): void;
  /**
   * Clears the traits assigned to a given node ID
   *
   * @param nodeId - A node ID
   */
  clearNode(nodeId: number): void;
}

⇗ Back to top

---

useSelections()

A plugin hook for adding select and multi-select to the file tree.

Arguments

Name	Type	Required?	Description
fileTree	FileTree<Meta>	Yes	A file tree
nodes	number[]	No	When using a hook like useFilter you can supply the filtered list of nodes to this option. By default, useVirtualize() uses the nodes returned by useVisibleNodes()

Returns UseSelectionsPlugin

interface UseSelectionsPlugin {
  /**
   * A subject that you can use to observe to changes to selections.
   */
  didChange: Subject<Set<number>>;
  /**
   * Get the React props for a given node ID.
   *
   * @param nodeId - A node ID
   */
  getProps(nodeId: number): SelectionsProps;
  /**
   * The head of the selections list
   */
  get head(): number | null;
  /**
   * The tail of the selections list
   */
  get tail(): number | null;
  /**
   * Select given node ids
   *
   * @param nodeIds - Node IDs
   */
  select(...nodeIds: number[]): void;
  /**
   * Deselect given node ids
   *
   * @param nodeIds - Node IDs
   */
  deselect(...nodeIds: number[]): void;
  /**
   * Clear all of the selections
   */
  clear(): void;
  /**
   * A utility function that yields nodes from a set of selections if they
   * don't have a parent node in the set.
   *
   * @yields {number} - A node id
   */
  narrow(): Generator<number, void, unknown>;
}

⇗ Back to top

---

useDnd()

A plugin hook for adding drag and drop to the file tree.

Arguments

Name	Type	Required?	Description
fileTree	FileTree<Meta>	Yes	A file tree
config	UseDndConfig	Yes	A configuration object for the drag and drop plugin

Returns UseDndPlugin

interface UseDndPlugin {
  /**
   * A subject that emits drag 'n drop events.
   */
  didChange: Subject<DndEvent<any> | null>;
  /**
   * Get the drag 'n drop props for a given node ID.
   */
  getProps: (nodeId: number) => DndProps | React.HTMLAttributes<HTMLElement>;
}

UseDndConfig

interface UseDndConfig {
  /**
   * Timeout for expanding a directory when a draggable element enters it.
   */
  dragOverExpandTimeout?: number;
  /**
   * A React ref created by useRef() or an HTML element for the container viewport
   * you're rendering the list inside of.
   */
  windowRef: WindowRef;
}

⇗ Back to top

---

useRovingFocus()

A plugin hook for adding roving focus to file tree nodes.

Arguments

Name	Type	Required?	Description
fileTree	FileTree<Meta>	Yes	A file tree

Returns UseRovingFocusPlugin

interface UseRovingFocusPlugin {
  /**
   * A subject that you can use to observe to changes to the focused node.
   */
  didChange: Subject<number>;
  /**
   * Get the React props for a given node ID.
   *
   * @param nodeId - A node ID
   */
  getProps: (nodeId: number) => RovingFocusProps;
}

⇗ Back to top

---

useHotkeys()

A hook for adding standard hotkeys to the file tree.

Arguments

Name	Type	Required?	Description
fileTree	FileTree<Meta>	Yes	A file tree
config	UseHotkeysConfig	No	A configuration object for the hotkeys plugin

UseHotkeysConfig

interface UseHotkeysConfig {
  /**
   * When using a hook like `useFilter` you can supply the filtered list of
   * nodes to this option. By default, `useVirtualize()` uses the nodes returned
   * by `useVisibleNodes()`
   */
  nodes?: number[];
  /**
   * A React ref created by useRef() or an HTML element for the container viewport
   * you're rendering the list inside of.
   */
  windowRef: WindowRef;
  /**
   * The returned value of the `useRovingFocus()` plugin
   */
  rovingFocus: ReturnType<typeof useRovingFocus>;
  /**
   * The returned value of the `useSelections()` plugin
   */
  selections: ReturnType<typeof useSelections>;
  /**
   * A pattern to use for selecting the elements in the list. Must contain an
   * `{index}` placeholder for the index of the element to select.
   */
  querySelectorPattern?: string;
}

⇗ Back to top

---

useObserver()

A hook for observing changes to the value of a subject.

Arguments

Name	Type	Required?	Description
subject	Subject	Yes	A subject to observe
observer	(value: T) => void | (() => void)	Yes	A callback that is invoked when the subject changes

⇗ Back to top

---

useFileTreeSnapshot()

Take a snapshot of the expanded and buried directories of a file tree. This snapshot can be used to restore the expanded/collapsed state of the file tree when you initially load it.

Arguments

Name	Type	Required?	Description
fileTree	FileTree<Meta>	Yes	A file tree
observer	(state: FileTreeSnapshot) => Promise<void> | void	Yes	A callback that handles the file tree snapshot

⇗ Back to top

---

Low-level API

FileTree()

Properties

Name	Type	Description
root	number	The root directory of the file tree.
comparator	Dir<Meta>	The comparator used for sorting the file tree.
visibleNodes	FileTreeNode<Meta>	The nodes that are currently visible.

Methods

Name	Description
getById	Get a node by its ID.
getByPath	Get a node by its path. Note that this requires walking the tree, which has O(n) complexity.
walk	Walks the tree starting at a given directory and calls a visitor function for each node.
expand	Expand a directory in the tree.
collapse	Collapse a directory in the tree.
remove	Remove a node and its descendants from the tree.
invalidate	Invalidate the list of visible nodes. This is useful for re-rendering your tree when node data changes.
produce	Produce a new tree with the given function applied to the given node. This is similar to immer's produce function as you're working on a draft and can freely mutate the object.
move	Move a node to a new parent.
newFile	Create a new file in a given directory.
newDir	Create a new directory in a given directory.
newPrompt	Create a new prompt in a given directory.
rename	Rename a node.
isExpanded	A more accurate and real-time representation of whether a branch is expanded. Dir#expanded represents the "optimistic" expansion state of the branch in question not the actual status, because the child nodes might still need to be loaded before the change can be seen in the tree.
isVisible	Returns true if the node and its parents are visible in the tree.
loadNodes	You can use this method to manually trigger a reload of a directory in the tree.

FileTreeData

type FileTreeData<Meta = {}> = {
  name: string;
  meta?: Meta;
};

⇗ Back to top

---

Dir()

A class for creating a directory node.

Arguments

Name	Type	Required?	Description
parent	Dir<Meta>	Yes	The parent node
data	FileTreeData<Meta>	Yes	The node data
expanded	boolean	No	Whether the node is expanded or not, defaults to false. This is an optimistic property, so when it is true its descendants may not be fully loaded yet. To get the more accurate representation, use FileTree#isExpanded.

Properties

Name	Type	Description
parentId	number	The ID of the parent node.
parent	Dir<Meta>	The parent node.
basename	string	The basename of the directory.
path	string	The full path of the directory.
expanded	boolean	true if the directory is expanded.
data	FileTreeData<Meta>	The node data

Methods

Name	Description
contains	Returns true if the node is a descendant of this directory.

⇗ Back to top

---

File()

A class for creating a file node.

Arguments

Name	Type	Required?	Description
parent	Dir<NodeData>	Yes	The parent node
data	FileTreeData<Meta>	Yes	The node data

Properties

Name	Type	Description
parentId	number	The ID of the parent node.
parent	Dir<Meta>	The parent node.
basename	string	The basename of the directory.
path	string	The full path of the directory.
data	FileTreeData<Meta>	The node data

⇗ Back to top

---

Prompt()

A class for creating a prompt node.

Arguments

Name	Type	Required?	Description
parent	Dir<NodeData>	Yes	The parent node

Properties

Name	Type	Description
parentId	number	The ID of the parent node.
parent	Dir<Meta>	The parent node.
path	string	The full path of the prompt.
basename	string	The base name of prompts is always an empty string.

⇗ Back to top

---

isDir()

Returns true if the given node is a directory

Arguments

Name	Type	Required?	Description
treeNode	FileTreeNode<T>	Yes	A file tree node

⇗ Back to top

---

isFile()

Returns true if the given node is a file

Arguments

Name	Type	Required?	Description
treeNode	FileTreeNode<T>	Yes	A file tree node

⇗ Back to top

---

isPrompt()

Returns true if the given node is a prompt

Arguments

Name	Type	Required?	Description
treeNode	FileTreeNode<T>	Yes	A file tree node

⇗ Back to top

---

subject()

A utility for creating a subject as part of the observer pattern.

Arguments

Name	Type	Required?	Description
initialState	T	Yes	The initial state of the subject.

Returns Subject

export type Subject<T> = {
  /**
   * Emit a new state.
   *
   * @param state - The new state
   */
  setState(state: T): void;
  /**
   * Get the current state.
   */
  getState(): T;
  /**
   * Observe changes to the state.
   *
   * @param observer - A callback that is invoked when the value changes
   */
  observe(observer: Observer<T>): () => void;
  /**
   * Remove a observer from the list of observers
   *
   * @param observer - A callback that is invoked when the value changes
   */
  unobserve(observer: Observer<T>): void;
};

type Observer<T> = {
  (state: T): void;
};

⇗ Back to top

---

mergeProps()

Merges multiple props objects together. Event handlers are chained, classNames are combined, and styles are combined.

For all other props, the last prop object overrides all previous ones.

Arguments

Name	Type	Required?	Description
args	{[key: string]: any;}[]	Yes	Multiple sets of props to merge together.

⇗ Back to top

---

retryWithBackoff()

Retry a promise until it resolves or the max number of retries is reached.

Arguments

Name	Type	Required?	Description
promiseFn	() => Promise<T>	Yes	A function that returns a promise to retry when it fails
config	RetryWithBackoffConfig	No	Configuration options

RetryWithBackoffConfig

interface RetryWithBackoffConfig {
  /**
   * Max number of retries
   *
   * @default 4
   */
  maxRetries?: number;
  /**
   * Initial delay before first retry
   *
   * @default 100
   */
  initialDelay?: number;
  /**
   * Multiplier for each subsequent retry
   *
   * @default 2
   */
  delayMultiple?: number;
  /**
   * A function that should return `false` to stop retrying
   *
   * @param error - The error that caused the retry
   */
  shouldRetry?: (error: unknown) => boolean;
}

⇗ Back to top

---

Path utilities

Utilities for unix-style paths

pathFx.join()

Join all arguments together and normalize the resulting path.

Arguments

Name	Type	Required?	Description
paths	string[]	Yes	Paths to join

⇗ Back to top

---

pathFx.relative()

Solve the relative path from from to to. Paths must be absolute.

Arguments

Name	Type	Required?	Description
from	string	Yes	The absolute path to start from
to	string	Yes	The absolute path to solve to

⇗ Back to top

---

pathFx.split()

Splits a path into an array of path segments.

Arguments

Name	Type	Required?	Description
path	string	Yes	The path to split.

⇗ Back to top

---

pathFx.normalize()

Normalize a path, taking care of .. and ., and removing redundant slashes while preserving trailing slashes.

Arguments

Name	Type	Required?	Description
path	string	Yes	The path to normalize.

⇗ Back to top

---

pathFx.depth()

Get the depth of a path.

Arguments

Name	Type	Required?	Description
path	string	Yest	The path to split.

⇗ Back to top

---

pathFx.basename()

Return the last fragment of a path.

Arguments

Name	Type	Required?	Description
path	string	Yes	The path to get the basename of.

⇗ Back to top

---

pathFx.dirname()

Return the directory name of a path.

Arguments

Name	Type	Required?	Description
path	string	Yes	The path to get the directory name of.

⇗ Back to top

---

pathFx.extname()

Returns the extension of a file path, which is the part of the path after the last .. If the path has no extension, returns an empty string.

Arguments

Name	Type	Required?	Description
path	string	Yes	The path to get the extension of.

⇗ Back to top

---

pathFx.isRelative()

Returns true if the path is relative.

Arguments

Name	Type	Required?	Description
path	string	Yes	The path to check.

⇗ Back to top

---

pathFx.isPathInside()

Returns true if path is inside dir.

Arguments

Name	Type	Required?	Description
path	string	Yes	The path to check
dir	string	Yes	The directory to check if the path is inside of

⇗ Back to top

---

pathFx.removeTrailingSlashes()

Remove any trailing slashes from a path.

Arguments

Name	Type	Required?	Description
path	string	Yes	The path to remove trailing slashes from.

⇗ Back to top

---

LICENSE

MIT