Back to articles
Stop writing the same filter boilerplate in every Inertia.js project
How-To

Stop writing the same filter boilerplate in every Inertia.js project

via Dev.toPaweł Targosinski

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

Read Full Article
3 views

Related Articles