Builiding Reusable Decoupled Components

Whenever I am writing a big new generic component, I alway’s try to think about:

— What are the common functionalities the component or set of components should be provide?

— How the component usage will look like?

— Are there any depedencies for the component?

— The components API (props/context/hooks)?

— Are there any specific functionalities that exist in rare scenarios, (if so how do I extract them outside the component and not bloat the component code with extra props) ?

In this post I will show an example of building a common Filter component

The user should be able to select various filters and apply them on the data displayed on the page (tables, list etc…).

Some filter options should come from backend.

There are various Filter Types, for simplicity there will only be Single Selection, Free text.

After selection the Filter should show current selection.

The end product will look like this:

Filters