Feature: create search params hooks

[alnavarrop99]

Description:
Hook for reading the search parameters of the route as an argument or of the current route.

Uses Cases:

• useSearchParams(): current url search params.
• useSearchParams("https://example.com?foo=1&bar=2&foo=2"): foo: 1, bar: 2.
• useSearchParams("https://example.com?foo=1&bar=2&foo=2", { unique: false }): foo: [1,2], bar: 2.

Examples:

import { useSearchParams } from "./hooks/ts/useSearchParams";

const App = () => {
  const params = useSearchParams("https://example.com?foo=1&bar=2&foo=2", { unique: true })
  return <div>
    <p>Typescript test:</p>
    { Object.entries(params)?.map( ([key, value]) => (
      <p key={key}>
        <span>{key}</span>: <span>{value}</span>
      </p>
    ) ) }
  </div>
};

export default App;

[alnavarrop99]

Do you also think it's necessary to include search parameter modification methods like has, set, append, delete that interact directly with the route? I'm not sure if it's a good idea since in most cases the project's router handles this, and I'm not completely sure if there could be incompatibilities between the hook and the router. Moxilla

[dlcastillop]

Update your branch with the latest changes in the repo. Now, you only must provide the hook in TypeScript (like you sugested 🙌) and all hooks are in the hooks directory.

[dlcastillop]

Do you also think it's necessary to include search parameter modification methods like has, set, append, delete that interact directly with the route? I'm not sure if it's a good idea since in most cases the project's router handles this, and I'm not completely sure if there could be incompatibilities between the hook and the router. Moxilla

I do not think we must include it because like you said normally the project's router handles this.

[dlcastillop]

When I use the hook without specify an url this error ocurrs:

useSearchParams.ts:5 Uncaught TypeError: Failed to construct 'URL': Invalid URL at useSearchParams (useSearchParams.ts:5:22)

import { useSearchParams } from "./hooks/ts/useSearchParams";

const AppTs = () => {
  const params = useSearchParams();
  return (
    <div>
      <p>Typescript test:</p>
      {Object.entries(params)?.map(([key, value]) => (
        <p key={key}>
          <span>{key}</span>: <span>{value}</span>
        </p>
      ))}
    </div>
  );
};

export default AppTs;

[alnavarrop99]

Ready, I have resolved the conflicts and corrected the current path error.

[dlcastillop]

Delete this file and the js folder

[dlcastillop]

I am also getting a lot of problems with the types

Does not your linter show it to you?

[dlcastillop]

Great work @alnavarrop99! 🙌