useKVS

useKVS persists and retrieves user preferences (page size, column visibility, sort preferences) to a server-side Key-Value Store. Preferences survive across browser sessions.

Import


import { useKVS } from "@phpcreation/frontend-crud-react-nextjs-bundle/hooks/useKVS";

Enabling KVS

KVS is only active when the environment variable is set:


NEXT_PUBLIC_KVS_DATA_STORE_TOGGLE=1

When disabled, useKVS falls back to localStorage.

Usage


import { useKVS } from "...";
 
function ListingPage() {
  const { get, set } = useKVS("invoices-listing");
 
  const perPage = get("perPage") ?? 25;
 
  const handlePerPageChange = (value: number) => {
    set("perPage", value);
  };
}

API

Method	Signature	Description
`get`	`(key: string) => any`	Get a stored value
`set`	`(key: string, value: any) => void`	Store a value
`remove`	`(key: string) => void`	Remove a stored value
`clear`	`() => void`	Clear all values for this namespace

Namespacing

The first argument to useKVS is the namespace key, scoped per entity:


useKVS("invoices-listing")    // Invoice listing preferences
useKVS("bills-listing")       // Bill listing preferences

ListingContext uses useKVS internally to persist page size and sort preferences. You only need to use useKVS directly for custom components.