useSearchParamsState

A drop-in replacement for useState that persists state in the query string.

Usage

import { useSearchParamsState } from '@machinemetrics/mm-react-tools';

function FilteredMachineList() {
  const [selectedMachine, setSelectedMachine] = useSearchParamsState(
    'machineId', // required
    'default-machine', // optional default value
    (val) => val, // optional deserialize function
    (str) => str, // optional serialize function
  );

  return (
    <div>
      <h2>Selected Machine: {selectedMachine}</h2>
      <select
        value={selectedMachine}
        onChange={(e) => setSelectedMachine(e.target.value)}
      >
        <option value="machine-1">Machine 1</option>
        <option value="machine-2">Machine 2</option>
      </select>
    </div>
  );
}

Parameters

Parameter	Type	Description
key	string	The query parameter key to use for storing the state
defaultValue	any	Optional default value if the query parameter is not present
deserialize	(value: string) => any	Optional function to convert the query string value to the desired type
serialize	(value: any) => string	Optional function to convert the value to a string for the query string

Returns

Returns a tuple containing:

1. The current value
2. A setter function to update the value

The setter function will automatically update both the state and the URL query parameters.