How to use use-query-params - 10 common examples

export function TaskAction({ project, action }: Object) {
  const userDetails = useSelector(state => state.auth.get('userDetails'));
  const token = useSelector(state => state.auth.get('token'));
  // eslint-disable-next-line
  const [editor, setEditor] = useQueryParam('editor', StringParam);
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);
  useEffect(
    () => {
      if (userDetails.id && token && action) {
        fetchLocalJSONAPI(`users/${userDetails.id}/tasks/?status=LOCKED_FOR_${action}`, token).then(
          res => {
            console.log(res);
            setTasks(res.tasks);
            setLoading(false);
          }
        );
      }
    }, [action, userDetails.id, token]
  );
  if (token) {

const UseQueryParamExample = () => {
  const [foo, setFoo] = useQueryParam('foo', StringParam);
  const [arr, setArr] = useQueryParam('arr', NumericArrayParam);

  // verify we aren't creating new arrays each time
  const prevArr = React.useRef(arr);
  React.useEffect(() => {
    if (prevArr.current !== arr) {
      console.log('new array. was:', prevArr.current, 'now:', arr);
    } else {
      console.log('same array');
    }
    prevArr.current = arr;
  });

  const nextFoo = nanoid(4);
  const nextArr = [
    Math.round(Math.random() * 100),
    Math.round(Math.random() * 100),

const UseQueryParamExample = () => {
  const [count, setCount] = React.useState(0);
  const [zzz, setZzz] = useQueryParam('zzz', NumberParam);
  const [custom, setCustom] = useQueryParam('custom', MyParam);
  const [test, setTest] = useQueryParam('test', StringParam);
  const [anyp, setAnyP] = useQueryParam('anyp');
  const [arr, setArr] = useQueryParam('arr', ArrayParam);

  // verify we aren't creating new arrays each time
  const prevArr = React.useRef(arr);
  React.useEffect(() => {
    if (prevArr.current !== arr) {
      console.log('new array. was:', prevArr.current, 'now:', arr);
    } else {
      console.log('same array');
    }
    prevArr.current = arr;
  });

export const useInboxQueryParams = () => {
  const uqp = useQueryParams(inboxQueryAllSpecification);

  /* TODO: refactor this larger fn to do useCallback or useMemo, below probably really expensive */
  const [qpValue, setQ] = uqp;
  if (qpValue && qpValue.page === undefined) {
    setQ({
      pageSize: 10,
      page: 1,
      orderBy: 'date',
      orderByType: 'desc'
    })
  }

  return uqp;
};

const { searchSalaryFilter, setSearchSalaryFilter } = useMemo(
    () => ({
      searchSalaryFilter: salaryFilterStrArr
        ? salaryFilterStrArr.split(",").map(n => (n ? parseInt(n) : undefined))
        : undefined,
      setSearchSalaryFilter: (value?: (number | undefined)[]) =>
        setSalaryFilterStrArr(
          value && (value[0] || value[1])
            ? `${value[0] || ""},${value[1] || ""}`
            : undefined
        ),
    }),
    [salaryFilterStrArr, setSalaryFilterStrArr]
  );

  const [searchLocationFilter, setSearchLocationFilter] = useQueryParam(
    SearchParamKey.LOCATION_FILTER,
    ArrayParam
  );

  return {
    searchQuery,
    setSearchQuery,

    searchType: searchType as SearchType | undefined,
    setSearchType,

    searchSort: searchSort as SearchSort | undefined,
    setSearchSort,

    searchRatingFilter,
    setSearchRatingFilter,

export const useSearchParams = () => {
  /**
   * Query parameter stores the value of the search query.
   */
  const [searchQuery, setSearchQuery] = useQueryParam(
    SearchParamKey.QUERY,
    StringParam
  );

  const [searchType, setSearchType] = useQueryParam(
    SearchParamKey.TYPE,
    StringParam
  );

  const [searchSort, setSearchSort] = useQueryParam(
    SearchParamKey.SORT,
    StringParam
  );

  const [ratingFilterStrArr, setRatingFilterStrArr] = useQueryParam(
    SearchParamKey.RATING_FILTER,
    StringParam
  );
  const { searchRatingFilter, setSearchRatingFilter } = useMemo(
    () => ({
      searchRatingFilter: ratingFilterStrArr
        ? ratingFilterStrArr.split(",").map(n => (n ? parseInt(n) : undefined))
        : undefined,
      setSearchRatingFilter: (value?: (number | undefined)[]) =>
        setRatingFilterStrArr(
          value && (value[0] || value[1])

export function TaskList({ project, tasks, activeFilter, selectTask, selected }: Object) {
  const user = useSelector(state => state.auth.get('userDetails'));
  const [readyTasks, setTasks] = useState([]);
  const [textSearch, setTextSearch] = useQueryParam('search', StringParam);
  const [sortBy, setSortingOption] = useQueryParam('sortBy', StringParam);
  const [statusFilter, setStatusFilter] = useQueryParam('filter', StringParam);

  useEffect(() => {
    if (tasks && tasks.activity) {
      let newTasks = tasks.activity;
      if (statusFilter === 'readyToMap') {
        newTasks = newTasks.filter(task => ['READY', 'INVALIDATED'].includes(task.taskStatus));
      }
      if (statusFilter === 'readyToValidate') {
        newTasks = newTasks.filter(task => ['MAPPED', 'BADIMAGERY'].includes(task.taskStatus));
      }
      if (textSearch) {
        newTasks = newTasks.filter(
          task =>
            task.taskId === Number(textSearch) ||
            (task.actionBy && task.actionBy.includes(textSearch)),

export const View: React.FC = ({ match }) => {
  const [sort, setSort] = useQueryParam("sortBy", StringParam);
  const [attributeFilters, setAttributeFilters] = useQueryParam(
    "filters",
    FilterQuerySet
  );

  const clearFilters = () => {
    setAttributeFilters({});
  };

  const onFiltersChange = (name, value) => {
    if (attributeFilters && attributeFilters.hasOwnProperty(name)) {
      if (attributeFilters[name].includes(value)) {
        if (filters.attributes[`${name}`].length === 1) {
          const att = { ...attributeFilters };
          delete att[`${name}`];
          setAttributeFilters({
            ...att,

export const useSearchParams = () => {
  /**
   * Query parameter stores the value of the search query.
   */
  const [searchQuery, setSearchQuery] = useQueryParam(
    SearchParamKey.QUERY,
    StringParam
  );

  const [searchType, setSearchType] = useQueryParam(
    SearchParamKey.TYPE,
    StringParam
  );

  const [searchSort, setSearchSort] = useQueryParam(
    SearchParamKey.SORT,
    StringParam
  );

  const [ratingFilterStrArr, setRatingFilterStrArr] = useQueryParam(
    SearchParamKey.RATING_FILTER,
    StringParam
  );
  const { searchRatingFilter, setSearchRatingFilter } = useMemo(
    () => ({
      searchRatingFilter: ratingFilterStrArr

export const View: React.FC = ({ match }) => {
  const [sort, setSort] = useQueryParam("sortBy", StringParam);
  const [attributeFilters, setAttributeFilters] = useQueryParam(
    "filters",
    FilterQuerySet
  );

  const clearFilters = () => {
    setAttributeFilters({});
  };

  const onFiltersChange = (name, value) => {
    if (attributeFilters && attributeFilters.hasOwnProperty(name)) {
      if (attributeFilters[name].includes(value)) {
        if (filters.attributes[`${name}`].length === 1) {
          const att = { ...attributeFilters };
          delete att[`${name}`];
          setAttributeFilters({