liquidstate

🧊 Liquidstate

A Zustand-inspired state management library for SolidJS that provides a simple, intuitive API for managing application state with TypeScript support.

✨ Features

• 🎯 Simple API: Zustand-inspired interface that's easy to learn and use
• 🔒 TypeScript Support: Full type safety with TypeScript
• ⚡ SolidJS Integration: Built specifically for SolidJS reactivity
• 🎨 Tailwind CSS Ready: Examples styled with Tailwind CSS
• 📦 Lightweight: Minimal bundle size with no external dependencies
• 🔄 Reactive: Automatic re-renders when state changes
• 🛠️ Developer Friendly: Great developer experience with clear APIs

🚀 Quick Start

Installation

npm install liquidstate

Basic Usage

import { createLiquidStore } from 'liquidstate';

// Create a store
const useStore = createLiquidStore((set, get) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

// Use in component
function Counter() {
  return (
    <div>
      <p>Count: {useStore.count}</p>
      <button onClick={useStore.increment}>+</button>
      <button onClick={useStore.decrement}>-</button>
      <button onClick={useStore.reset}>Reset</button>
    </div>
  );
}

📚 Examples

This repository includes comprehensive examples demonstrating various use cases:

🎯 Counter Demo

Enhanced counter with step control, history tracking, and animations.

📝 Todo List

Complete todo management with filtering, CRUD operations, and statistics.

👤 User Profile

User profile management with form validation, edit modes, and preferences.

🛒 Shopping Cart

E-commerce cart with product filtering, search, and complex state management.

🎨 Theme Toggle

Theme switching with persistent state, customization options, and localStorage integration.

🛠️ Development

Prerequisites

• Node.js 16+
• npm or yarn

Setup

# Clone the repository
git clone <repository-url>
cd liquidstate

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm test

# Build for production
npm run build

View Examples

• Start the development server: npm run dev
• Open http://localhost:3002/ for the main counter demo
• Open http://localhost:3002/examples.html for the examples index

📖 API Reference

createLiquidStore<T>(initializer)

Creates a new store with the given initializer function.

Parameters:

• initializer: (set: SetState<T>, get: GetState<T>) => T - Function that returns the initial state

Returns: Store<T> - SolidJS store object

Types:

• SetState<T>: (partial: Partial<T> | ((state: T) => Partial<T>)) => void
• GetState<T>: () => T

State Updates

// Direct object update
set({ count: 5 });

// Function-based update
set(state => ({ count: state.count + 1 }));

// Partial updates
set({ name: 'John' }); // Only updates name, keeps other properties

🎨 Styling

All examples use Tailwind CSS via CDN for styling. The examples demonstrate:

• Responsive design patterns
• Custom color schemes
• Interactive components
• Modern UI/UX practices

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

• Fork the repository
• Create your feature branch (git checkout -b feature/AmazingFeature)
• Commit your changes (git commit -m 'Add some AmazingFeature')
• Push to the branch (git push origin feature/AmazingFeature)
• Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by Zustand for React
• Built for SolidJS
• Styled with Tailwind CSS

📞 Support

If you have any questions or need help, please:

• Check the examples directory
• Open an issue on GitHub
• Review the API documentation above

💖 Support the Project

If you find Liquidstate helpful and would like to support its development, consider making a donation:

Your support helps maintain and improve this project for the SolidJS community!

Made with ❤️ by Paul Obunga for the SolidJS community