tessl/npm-react-router-native

Declarative routing for React Native applications with native-specific components and deep linking support

—

Pending

Overview

Eval results

Files

Search Parameters

Name: tessl/npm-react-router-native
Author: tessl

Enhanced URLSearchParams functionality adapted for React Native applications with mobile-optimized parameter handling and React hooks integration.

Capabilities

useSearchParams

A convenient wrapper for accessing and modifying individual query parameters via the URLSearchParams interface. Provides React state integration for URL search parameters.

/**
 * Hook for managing URL search parameters with React state integration
 * Provides current search params and setter function
 * @param defaultInit - Default parameters to merge when not present in URL
 * @returns Tuple of [searchParams, setSearchParams]
 */
function useSearchParams(
  defaultInit?: URLSearchParamsInit
): [URLSearchParams, SetURLSearchParams];

type SetURLSearchParams = (
  nextInit?:
    | URLSearchParamsInit
    | ((prev: URLSearchParams) => URLSearchParamsInit),
  navigateOpts?: NavigateOptions
) => void;

Usage Examples:

import { useSearchParams } from "react-router-native";
import { View, Text, TextInput, TouchableOpacity } from "react-native";
import { useState } from "react";

// Basic search params usage
function SearchScreen() {
  const [searchParams, setSearchParams] = useSearchParams();
  const [query, setQuery] = useState(searchParams.get("q") || "");
  
  const handleSearch = () => {
    setSearchParams({ q: query });
  };
  
  return (
    <View>
      <Text>Current search: {searchParams.get("q") || "None"}</Text>
      <TextInput
        value={query}
        onChangeText={setQuery}
        placeholder="Search..."
      />
      <TouchableOpacity onPress={handleSearch}>
        <Text>Search</Text>
      </TouchableOpacity>
    </View>
  );
}

// With default parameters
function FilteredList() {
  const [searchParams, setSearchParams] = useSearchParams({
    sort: "name",
    page: "1"
  });
  
  const currentSort = searchParams.get("sort");
  const currentPage = searchParams.get("page");
  
  const updateSort = (newSort) => {
    setSearchParams(prev => {
      prev.set("sort", newSort);
      prev.set("page", "1"); // Reset to first page
      return prev;
    });
  };
  
  return (
    <View>
      <Text>Sort: {currentSort}, Page: {currentPage}</Text>
      <TouchableOpacity onPress={() => updateSort("date")}>
        <Text>Sort by Date</Text>
      </TouchableOpacity>
    </View>
  );
}

// Functional updates
function AdvancedFilters() {
  const [searchParams, setSearchParams] = useSearchParams();
  
  const addFilter = (key, value) => {
    setSearchParams(prev => {
      const newParams = new URLSearchParams(prev);
      newParams.append(key, value);
      return newParams;
    });
  };
  
  const removeFilter = (key) => {
    setSearchParams(prev => {
      const newParams = new URLSearchParams(prev);
      newParams.delete(key);
      return newParams;
    });
  };
  
  return (
    <View>
      <Text>Active filters: {searchParams.toString()}</Text>
      <TouchableOpacity onPress={() => addFilter("category", "electronics")}>
        <Text>Add Electronics Filter</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => removeFilter("category")}>
        <Text>Remove Category Filter</Text>
      </TouchableOpacity>
    </View>
  );
}

// With navigation options
function PaginatedList() {
  const [searchParams, setSearchParams] = useSearchParams({ page: "1" });
  
  const goToPage = (pageNum) => {
    setSearchParams(
      { page: pageNum.toString() },
      { replace: true } // Replace instead of push to avoid back button issues
    );
  };
  
  return (
    <View>
      <Text>Current page: {searchParams.get("page")}</Text>
      <TouchableOpacity onPress={() => goToPage(2)}>
        <Text>Go to Page 2</Text>
      </TouchableOpacity>
    </View>
  );
}

createSearchParams

Creates a URLSearchParams object using the given initializer. This is identical to new URLSearchParams(init) except it also supports arrays as values in the object form.

/**
 * Creates a URLSearchParams object with enhanced array support
 * Supports string, array, object, and URLSearchParams initializers
 * @param init - Initial parameters in various formats
 * @returns URLSearchParams instance
 */
function createSearchParams(init?: URLSearchParamsInit): URLSearchParams;

type URLSearchParamsInit =
  | string
  | ParamKeyValuePair[]
  | Record<string, string | string[]>
  | URLSearchParams;

type ParamKeyValuePair = [string, string];

Usage Examples:

import { createSearchParams } from "react-router-native";

// From string
const params1 = createSearchParams("q=search&sort=name");
console.log(params1.get("q")); // "search"

// From object with single values
const params2 = createSearchParams({
  q: "search term",
  sort: "date",
  page: "1"
});

// From object with array values (multiple values for same key)
const params3 = createSearchParams({
  categories: ["electronics", "books"],
  tags: ["sale", "featured"]
});
console.log(params3.getAll("categories")); // ["electronics", "books"]

// From key-value pair arrays
const params4 = createSearchParams([
  ["sort", "name"],
  ["sort", "price"], // Multiple values for same key
  ["category", "electronics"]
]);

// From existing URLSearchParams
const existing = new URLSearchParams("a=1&b=2");
const params5 = createSearchParams(existing);

// Complex example with arrays
const filterParams = createSearchParams({
  search: "laptop",
  categories: ["electronics", "computers"],
  priceRange: ["100", "500"],
  inStock: "true"
});

// Results in: search=laptop&categories=electronics&categories=computers&priceRange=100&priceRange=500&inStock=true

Types

type URLSearchParamsInit =
  | string
  | ParamKeyValuePair[]
  | Record<string, string | string[]>
  | URLSearchParams;

type ParamKeyValuePair = [string, string];

type SetURLSearchParams = (
  nextInit?:
    | URLSearchParamsInit
    | ((prev: URLSearchParams) => URLSearchParamsInit),
  navigateOpts?: NavigateOptions
) => void;

// Navigation options for setSearchParams
interface NavigateOptions {
  replace?: boolean;
  state?: any;
  relative?: RelativeRoutingType;
}

type RelativeRoutingType = "route" | "path";

Mobile Optimization Features

Default Parameter Handling

Automatic Merging: Default parameters are automatically merged with URL parameters
Persistent Defaults: Default values persist even when not in the URL
Override Support: URL parameters override defaults when present

Array Support

Multiple Values: Object initializer supports arrays for multiple values per key
Backward Compatibility: Standard URLSearchParams behavior for string and array initializers
Convenient Syntax: Cleaner syntax than manual array construction

State Integration

React Hooks: Full integration with React component state
Automatic Updates: Components re-render when search parameters change
Navigation Integration: Parameter changes trigger navigation updates

Usage Patterns

Search and Filtering

// Typical search implementation
function useSearch() {
  const [searchParams, setSearchParams] = useSearchParams({
    q: "",
    sort: "relevance",
    page: "1"
  });
  
  const search = (query) => {
    setSearchParams(prev => {
      const newParams = new URLSearchParams(prev);
      newParams.set("q", query);
      newParams.set("page", "1"); // Reset pagination
      return newParams;
    });
  };
  
  return { searchParams, search };
}

Pagination

// Pagination with search params
function usePagination() {
  const [searchParams, setSearchParams] = useSearchParams({ page: "1" });
  
  const setPage = (page) => {
    setSearchParams(prev => {
      const newParams = new URLSearchParams(prev);
      newParams.set("page", page.toString());
      return newParams;
    }, { replace: true }); // Replace to avoid cluttering history
  };
  
  return { 
    currentPage: parseInt(searchParams.get("page") || "1"),
    setPage 
  };
}

Multi-select Filters

// Multi-select filter implementation
function useFilters() {
  const [searchParams, setSearchParams] = useSearchParams();
  
  const toggleFilter = (key, value) => {
    setSearchParams(prev => {
      const newParams = new URLSearchParams(prev);
      const current = newParams.getAll(key);
      
      if (current.includes(value)) {
        // Remove the value
        newParams.delete(key);
        current.filter(v => v !== value).forEach(v => {
          newParams.append(key, v);
        });
      } else {
        // Add the value
        newParams.append(key, value);
      }
      
      return newParams;
    });
  };
  
  return { searchParams, toggleFilter };
}

Install with Tessl CLI

npx tessl i tessl/npm-react-router-native

docs

index.md

native-routing.md

react-router-components.md

react-router-hooks.md

react-router-utilities.md

search-parameters.md

tile.json

tessl/npm-react-router-native