v4.0.2 - Simple & Powerful

Auto Config System

Slug Store

Simple state management that works everywhere. One hook, infinite possibilities with intelligent Auto Config System.No complex setup - just pure, intelligent state persistence.

6KB gzipped

Auto-configured

Works everywhere

500+ downloads

What is Slug Store v4.0.2?

Simple state management with intelligent Auto Config System

Auto Config System

Automatically detects data patterns and optimizes persistence

• Small data → URL persistence

• Large data → Offline storage

• Sensitive data → Encryption

• Zero configuration needed

const [filters, setFilters] = useSlugStore('filters', {
  category: 'tech',
  sort: 'newest'
}, {
  autoConfig: true  // 🎯 Automatic optimization
})

Simple API

One hook that works everywhere - client, server, anywhere

• Single hook API

• Works in any component

• Type-safe by default

• Zero boilerplate

// Simple state management
const [state, setState] = useSlugStore('key', initialState, {
  url: true,        // Share via URL
  offline: true,    // Store offline
  autoConfig: true  // Auto-optimize
})

Perfect for AI Apps

Designed for AI-built applications with intelligent defaults

• 72% smaller bundle than v3.x

• Intelligent defaults

• Zero configuration

• Works out of the box

// AI can focus on business logic
// Not complex state setup
const [cart, setCart] = useSlugStore('cart', [])

npm install slug-store

How It Works

One hook for simple state management with automatic optimization

1. Import the Hook

Import useSlugStore from slug-store/client

import { useSlugStore } from 'slug-store/client'

// That's it! Ready to use.

2. Use the Hook

Call useSlugStore with your key and initial state

function TodoApp() {
  const [todos, setTodos] = useSlugStore('todos', [], {
    url: true,        // Share via URL
    offline: true,    // Store offline
    autoConfig: true  // Auto-optimize
  })
}

3. That's It!

Your state is automatically persisted and optimized

// Use like useState
return (
  <div>
    {todos.map(todo => (
      <div key={todo.id}>{todo.text}</div>
    ))}
    <button onClick={() => setTodos([...todos, newTodo])}>
      Add Todo
    </button>
  </div>
)

Perfect for AI-Built Apps

Simple API that works everywhere - no complex setup needed

E-commerce

Shopping carts, wishlists, and product filters with automatic URL sharing

Dashboards

Analytics dashboards with shareable configurations and offline support

Content Apps

Document editors, note-taking apps, and content management systems

Gaming

Game state, progress tracking, and settings with cross-device sync

❌ Traditional React State

Complex, non-persistent, hard to share

import { useState, useEffect } from 'react'

function Dashboard() {
  const [filters, setFilters] = useState({ status: 'all', category: 'all' })
  const [view, setView] = useState('grid')
  const [data, setData] = useState([])
  
  // Manual URL sync
  useEffect(() => {
    const params = new URLSearchParams(location.search)
    if (params.has('filters')) {
      setFilters(JSON.parse(params.get('filters')))
    }
  }, [])
  
  useEffect(() => {
    const url = new URL(window.location)
    url.searchParams.set('filters', JSON.stringify(filters))
    window.history.replaceState({}, '', url)
  }, [filters])
  
  // Can't share state easily
  const shareState = () => {
    // Complex sharing logic needed
  }
}

✅ Slug Store v4.0

Simple, persistent, instantly shareable

import { useSlugStore } from 'slug-store/client'

function Dashboard() {
  const [state, setState] = useSlugStore('dashboard', {
    filters: { status: 'all', category: 'all' },
    view: 'grid',
    data: []
  }, {
    url: true,        // Automatic URL sync
    autoConfig: true  // Automatic optimization
  })
  
  const updateFilters = (newFilters) => {
    setState({
      ...state,
      filters: { ...state.filters, ...newFilters }
    })
    // URL automatically updated!
  }
  
  // URL is already shareable!
  return (
    <div>
      <select 
        value={state.filters.category} 
        onChange={(e) => updateFilters({ category: e.target.value })}
      >
        <option value="all">All Categories</option>
        <option value="tech">Tech</option>
      </select>
    </div>
  )
}

MIT Licensed

TypeScript First

Zero Dependencies