List down filter components in horizontal bar, if there are many filters and they don't adjust in the available space, move rest of the filters in dropdown. On window resize re-adjust all filters.
This is a reusable React component designed to display a set of filters in a horizontal bar. If the available space is not sufficient to accommodate all filters, the excess filters are moved into a dropdown menu. The component also automatically re-adjusts the layout when the window is resized.
- Display a list of filters in a horizontal bar.
- If there is limited space, move additional filters into a dropdown menu.
- Automatic re-adjustment of the layout on window resize.
install dependencies
yarn install
run application
yarn dev
Live demo https://stackblitz.com/edit/filters-bar?file=src%2FApp.js