🧠 Zustand Image Store

A lightweight and persistent image store built using Zustand.
It helps you manage an array of images (add, delete, persist) in your React applications effortlessly.

🚀 Features

• Simple and minimal — no Redux setup required
• Persistent — stores data in localStorage
• Easy to integrate with any React component
• Fast and reactive updates with Zustand

📦 Installation

First, install the package:

npm install zustand zustand-image-store

or using Yarn:

yarn add zustand zustand-image-store

🪄 Usage

Import and use the custom hook inside your React components:

import React from "react";
import { useImageStore } from "zustand-image-store";

function Gallery() {
  const { images, setImage, deleteImage } = useImageStore();

  return (
    <div>
      <button
        onClick={() =>
          setImage({ id: Date.now(), url: "https://placekitten.com/200/200" })
        }
      >
        Add Image
      </button>

      {images.map((img) => (
        <div key={img.id} style={{ marginTop: "10px" }}>
          <img src={img.url} width="100" alt="preview" />
          <button onClick={() => deleteImage(img.id)}>Delete</button>
        </div>
      ))}
    </div>
  );
}

export default Gallery;

⚙️ API Reference

| Function | Description | Example | |-----------|--------------|----------| | images | Returns the current list of stored images | const { images } = useImageStore() | | setImage(payload) | Adds a new image object to the store | setImage({ id: 1, url: "pic.jpg" }) | | deleteImage(id) | Removes an image by its id | deleteImage(1) |

🧱 Store Structure

The store automatically persists in localStorage under the key "image-store".

{
  images: [
    { id: 1, url: "example.jpg" },
    { id: 2, url: "cat.png" },
  ]
}

🧰 How It Works

This hook uses Zustand’s persist middleware to save your data locally.
When the app reloads, Zustand automatically rehydrates the store from localStorage.

import { create } from "zustand";
import { persist } from "zustand/middleware";

export const useImageStore = create(
  persist(
    (set) => ({
      images: [],
      setImage: (payload) =>
        set((state) => ({ images: [...state.images, payload] })),
      deleteImage: (id) =>
        set((state) => ({
          images: state.images.filter((img) => img.id !== id),
        })),
    }),
    { name: "image-store" }
  )
);

🪪 License

MIT © https://github.com/sapnendra

🌟 Support

If you like this package, consider giving it a ⭐ on GitHub!
Pull requests and improvements are always welcome.