
Stop writing the same filter boilerplate in every Inertia.js project
Every Laravel + Inertia app has a list page. Every list page has filters. And every time, you write the same thing: const search = ref ( '' ) const status = ref ( null ) const perPage = ref ( 15 ) watch ([ search , status , perPage ], debounce (() => { router . get ( ' /users ' , pickBy ({ search : search . value , status : status . value , perPage : perPage . value }), { preserveState : true , replace : true , }) }, 300 )) Then you realize pickBy doesn't handle false correctly. Then you add URL hydration on mount. Then you add a reset button. Then you need instant visits for perPage but debounced for search . Then you paste the whole thing into the next project. I got tired of this. So I extracted it into a composable and published it. Introducing useInertiaFilters npm install @mits_pl/use-inertia-filters The same page, now: < script setup lang= "ts" > import { useInertiaFilters } from ' @mits_pl/use-inertia-filters ' const { filters , reset , isDirty } = useInertiaFilters ({ search :
Continue reading on Dev.to
Opens in a new tab


