Suggestions on Search Bar?

Hey folks, adding a search field to the top of my new frontity site and pondering the best way to go about this without importing tons of bloat. This is interesting but super bulky https://react-native-elements.github.io/react-native-elements/docs/searchbar.html - and needs a bunch of dependencies. I’m probably going to stick with react-search-field or react-search-box but just wanted to see if anyone had done this already and had any tips?

Hi @gareth.developer! Great to see you trying frontity out! :wave:

The component library that you have linked to is for react-native which is a react-like library for use in android and iOS and would not work with frontity.

I do not know your specific use case, but I would recommend that you try to implement the search box by yourself, especially if you’re worried about bloat. It should not take very much effort and you end up with complete control over your code. For example, if you look at the code of react-search-field that you mentioned, it’s just one 160 line file and most of it is related to styling! :slight_smile:

If you have a more advanced use case, I would recommend using a library like https://github.com/downshift-js/downshift, which provides you with basic building blocks to create very sophisticated search/dropdown/select elements and style them however you like.

1 Like

Hi @gareth.developer.

The Twenty Twenty theme and the upcoming Chakra theme already implements a search functionality. You could check them out to see if might help:

Twenty Twenty: https://github.com/frontity/frontity/tree/beta/packages/twentytwenty-theme/src/components/search

Chakra Theme: https://github.com/chakra-ui/frontity-chakra-ui-theme/tree/master/packages/chakra-theme/src/components/search

Just like @mmczaplinski mentioned, you can use react-search-field or downshift for more customized solutions.

Hope this helped.

Regards,
Segun

1 Like

Incredible stuff! Can’t believe I missed these. THANK YOU!!!

1 Like

Awesome advice! THANK YOU SO MUCH

2 Likes

Glad to help, enjoy Frontity! :v:

1 Like