tailwindapi

tailwindAPI

State management as simple as CSS classes. No Redux boilerplate.

Features

• 🚀 Simple API - No boilerplate, just create a store and use it
• 📦 Lightweight - ~2KB gzipped
• ⚡ TypeScript - Full type safety out of the box
• 🎣 React Hooks - Built-in hooks for React components
• 🔄 Mutations & Actions - Synchronous and async state updates
• 💾 Persistence - Optional localStorage persistence
• 🧩 Composable - Combine multiple stores easily

Installation

npm install tailwindapi

Quick Start

import { StateManager, useStateless } from 'tailwindapi';

// Create a store
const counterStore = new StateManager({
  initialState: { count: 0 },
  mutations: {
    INCREMENT: (state, payload) => {
      state.count += payload || 1;
    }
  }
});

// Use in React component
function Counter() {
  const { state, commit } = useStateless(counterStore);
  
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => commit('INCREMENT', 1)}>+1</button>
    </div>
  );
}

Documentation

StateManager

The core class that manages your application state.

const store = new StateManager({
  initialState: { count: 0, user: null },
  mutations: {
    INCREMENT: (state, payload) => { state.count += payload || 1; },
    SET_USER: (state, user) => { state.user = user; }
  },
  actions: {
    fetchUser: async (state, userId) => {
      const user = await api.getUser(userId);
      state.user = user;
    }
  }
});

Hooks

useStateless

Basic hook for state management.

const { state, commit, dispatch, reset } = useStateless(store);

useAPI

Hook with built-in loading and error states.

const { state, callAPI, isLoading, error } = useAPI(store);

useSlice

Subscribe to a single property for performance.

const [count, setCount] = useSlice(store, 'count');

useMutate

Simplified hook for mutations only.

const { mutate, state } = useMutate(store);
mutate('INCREMENT', 5);

Utilities

withLogger

Add logging to your store for debugging.

const store = withLogger(new StateManager({...}));

createPersistedStore

Create a store that persists to localStorage.

const store = createPersistedStore(
  { initialState: {...}, mutations: {...} },
  'my-app-state'
);

combineStores

Combine multiple stores into one.

const rootStore = combineStores({
  user: userStore,
  cart: cartStore
});

Examples

See EXAMPLE_USAGE.md for complete examples.

License

MIT