@stactorial/react-useStoredQsp

A React helper for using query string parameters

Currently works with React Router 6 only. TypeScript supported.

---

Installation | Usage | API

---

Installation

Using npm:

$ npm install @stactorial/react-usestoredqsp

Place the Provider in your Router

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { StoredQspProvider } from "@stactorial/react-useStoredQsp";
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <BrowserRouter>
    <StoredQspProvider>
      <Routes>
        <Route path="/" element={<App />}>
      </Routes>
    </StoredQspProvider>
  </BrowserRouter>,
  document.getElementById('root')
);

Usage

Add the useStoredQsp hook to your component:

import React from "react";
import { useStoredQsp } from "@stactorial/react-useStoredQsp";

function ExampleComponent() {
  // something like: ?myString=I%27m%20the%20default%20string%21&searchQuery=%7B"page"%3A1%2C"filters"%3A%5B"enabled"%2C"live"%5D%7D in the URL

  const [qspString, setQspString] = useStoredQsp("myString", "string", "I'm the default string!");

  const defaultSearch = { page: 1, filters: ["enabled", "live"] };
  const [searchQuery, setSearchQuery] = useStoredQsp<{ page: number; filters: string[]; search?: string }>(
    "searchQuery",
    "json",
    defaultSearch
  );

  return (
    <div>
      <p>myString: {qspString}</p>
      <input onChange={(e) => setQspString(e.target.value)} />
      <p>searchQuery.search: {searchQuery?.search}</p>
      <input onChange={(e) => setSearchQuery({ ...(searchQuery || defaultSearch), search: e.target.value })} />
    </div>
  );
}

export default ExampleCompnent;

API

Coming Soon!