useEmailQueryParam()

This is helpful if you want to send a marketing email and include a query param like ?email=meleerob.io to pre-fill some input.

import { useEffect } from 'react';
import { useRouter } from 'next/router';

/**
 * If `paramName` exists in query string, then call `setEmail()` with the value
 * and delete it from the URL.
 */
export default function useEmailQueryParam(
  paramName: string,
  setEmail: (email: string) => unknown
) {
  const router = useRouter();
  useEffect(() => {
    if ('URLSearchParams' in window) {
      const { search, pathname } = window.location;
      const params = new URLSearchParams(search);
      const email = params.get(paramName);
      if (email) {
        setEmail(email);
        params.delete(paramName);
        const newSearch = params.toString();
        const newAsPath = pathname + (newSearch ? `?${newSearch}` : '');
        const newPathname =
          router.pathname + (newSearch ? `?${newSearch}` : '');
        history.replaceState(
          { url: newPathname, as: newAsPath, options: { shallow: true } },
          '',
          newAsPath
        );
      }
    }
  }, [setEmail, router.pathname, paramName]);
}