antonioru / antonioru/beautiful-react-hooks

useTableParams hook

Aberta
#436 0 comentários 0 reações 0 responsáveis Ver no GitHub
Linguagem predominante
JavaScript
Estrelas
8.4k
Forks
580
Métricas de merge de PRs
Nenhum PR com merge em 30d

Descrição

Is your feature request related to a problem? Please describe.
When building data tables (pagination, search, filters), I keep re-implementing the same logic to sync table state with the URL query string, so refreshing or sharing a link reproduces the exact same view. There's no existing hook here for this, so it gets rebuilt by hand in every project.

Describe the solution you'd like
A useTableParams hook built on useSearchParams that:

Takes a defaults object declaring which query keys the table cares about and their fallback values
Exposes the current values plus setParam/setParams/removeParam/clearParams helpers
Removes a key from the URL entirely when its value is empty/null/undefined (keeps URLs clean)
Resets pagination back to default whenever a non-page filter changes
Skips the navigation update entirely when nothing actually changed (avoids redundant re-renders/history entries)

Example usage:

js
const { page, search, setParam } = useTableParams({
page: "0",
search: "",
status: "active",
});

setParam("search", "ahmed"); // → ?search=ahmed, page reset to default
setParam("search", ""); // → search key removed from URL entirely

I already have working JavaScript and TypeScript implementations and am happy to open a PR.

Describe alternatives you've considered
Rolling this logic manually in each table component, or a generic useSearchParams wrapper without the clean-URL/pagination-reset/no-op behaviors — both end up duplicated per project.

Additional context
This depends on react-router-dom's useSearchParams.

Guia de contribuição

Abrir o guia de contribuição

Direção de pesquisa

Start by reading the repository's existing custom-hook conventions and the react-router-dom useSearchParams API. Compare the supplied JavaScript and TypeScript implementations against the requested defaults, parameter helpers, clean URL removal, pagination reset, and no-op navigation behavior; done means each listed scenario works as described.

Escrita pelo modelo de indexação a partir do texto da issue.

Avaliação

Stack de tecnologia
javascript, react, typescript
Domínio
frontend
Tipo de issue
Funcionalidade
Dificuldade
3/5
Tempo estimado
1-2 dias
Status de atividade
Ativa
Clareza
Claramente especificada
Facilidade para iniciantes
78/100

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.