docs: useSearchParams

remix-run · Sep 28, 2023 · 7f93868 · 7f93868
1 parent 40cb762
commit 7f93868
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 10 deletions.
diff --git a/docs/hooks/use-route-loader-data.md b/docs/hooks/use-route-loader-data.md
@@ -5,9 +5,7 @@ toc: false
 
 # `useRouteLoaderData`
 
-<docs-info>This hook is simply a re-export of [React Router `useRouteLoaderData`][rr-userouteloaderdata].</docs-info>
-
-Pass in a route ID and it will return the loader data for that route.
+Returns the loader data for a given route by ID.
 
 ```tsx
 import { useRouteLoaderData } from "@remix-run/react";
@@ -24,7 +22,3 @@ Remix creates the route IDs automatically. They are simply the path of the route
 | `app/root.tsx`             | `"root"`             |
 | `app/routes/teams.tsx`     | `"routes/teams"`     |
 | `app/routes/teams.$id.tsx` | `"routes/teams.$id"` |
-
-<docs-info>For more information and usage, please refer to the [React Router `useRouteLoaderData` docs][rr-userouteloaderdata].</docs-info>
-
-[rr-userouteloaderdata]: https://reactrouter.com/hooks/use-route-loader-data
diff --git a/docs/hooks/use-search-params.md b/docs/hooks/use-search-params.md
@@ -1,10 +1,62 @@
 ---
 title: useSearchParams
-toc: false
 ---
 
 # `useSearchParams`
 
-<docs-info>This hook is simply a re-export of [React Router's `useSearchParams`][rr-usesearchparams].</docs-info>
+Returns a tuple of the current [search params][searchparams] and a function to update them. Setting the search params causes a navigation.
 
-[rr-usesearchparams]: https://reactrouter.com/hooks/use-search-params
+```tsx
+import { useSearchParams } from "@remix-run/react";
+
+export function SomeComponent() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  // ...
+}
+```
+
+## Signature
+
+<!-- eslint-disable -->
+
+```tsx
+const [searchParams, setSearchParams] = useSearchParams();
+```
+
+### `searchParams`
+
+The first value returned is a [Web URLSearchParams][searchparams] object.
+
+### `setSearchParams(params)`
+
+The second value returned is a function to set new search params and causes a navigation when called.
+
+```tsx
+<button
+  onClick={() => {
+    const params = new URLSearchParams();
+    params.set("someKey", "someValue");
+    setSearchParams(params);
+  }}
+/>
+```
+
+### `setSearchParams((prevParams) => newParams)`
+
+The setter function also supports a function for setting new search params.
+
+```tsx
+<button
+  onClick={() => {
+    setSearchParams((prev) => {
+      prev.set("someKey", "someValue");
+      return prev;
+    });
+  }}
+/>
+```
+
+[searchparams]: https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams
+[usesearchparams-native]: ./use-search-params-rn
+[usestate]: https://react.dev/reference/react/useState
+[usenavigate]: ./use-navigate