Introduction

Welcome to the FloppyDisk.ts documentation!

FloppyDisk is a lightweight state management library for both sync & async state.
It brings together familiar patterns into a simpler, more predictable model.

Installation

npm i floppy-disk

Compatible with React 17+ and works any renderers such as react-dom, react-native, react-three-fiber, and so on.

Feature Preview

Store (Global State)

Create a store:

import { createStore } from "floppy-disk/react";
 
const useLawn = createStore({
  plants: 3,
  zombies: 1,
});

Use it inside a component:

function MyPlants() {
  const { plants } = useLawn(); // No selectors needed.
 
  return <div>Plants: {plants}</div>; // Only re-render when plants state changes
}

Update the state anywhere:

const addPlant = () => {
  useLawn.setState(prev => ({ plants: prev.plants + 1 }));
};

Query Store for Async State

Create a query store for async data with createQuery:

import { createQuery } from "floppy-disk/react";
 
const plantDetailQuery = createQuery(
  async ({ id }) => {
    const res = await fetch(`/api/plants/${id}`);
    return res.json();
  },
);

function PlantDetail({ id }) {
  const usePlantDetailQuery = plantDetailQuery({ id });
  const { data, error } = usePlantDetailQuery();
 
  if (!data && !error) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
 
  return <div>Name: {data.name}, damage: {data.damage}</div>;
}

No such QueryClientProvider needed.