antonioru / antonioru/beautiful-react-hooks
useTableParams hook
- 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
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