How to implement instansearch.js in the difference UI

How to reuse widget in the difference UI and has the same data.

Situation example
If user open web on desktop and input “hello” in search box then user resize web to mobile view then UI changes but search box should have the same value.

<div class="visible-mobile-view"> 
<div id="search-widget"></div>
</div>

<div class="visible-desktop-view"> 
<div id="search-widget"></div>
</div>

Thanks

Hi @tech2

InstantSearch.js doesn’t support dynamically removing / adding widgets for the moment (we’re working on it). I think the best for now would be to instanciate both and hide / show the widget containers based on the size of the viewport. Definitely hacky but it should work pretty well.

1 Like

Thanks :slight_smile:

I have another questions, actually I implement by using connector of InstantSearch.js for customize. Do you think It can dynamic to create custom template ? To solve this problem

1 Like

When you use a connector, you basically do whatever you want in terms of rendering, so yes you could have a different template based on the viewport dimensions.