Integration within React apps

Follow-up from #831

---

@vvo thanks! Not much feedback for the moment as the project is still at a very early stage and as i’m just discovering the lib.

I was wondering, though, if there might be a more straightforward integration within a React app. Excuse-me if it’s already the case. I was thinking about an api like, for example :

import React, { Component } from 'react' 
import { InstantSearch, SearchBox, Hits } from 'instantsearch.js'

class MySearchComponent extends Component {
  render() {
    return (
      <InstantSearch
        appId={ appId }
        apiKey={ apiKey }
        indexName={ indexName }
      >
        <SearchBox
          placeholder={ 'Custom placeholder' }
        />
        <Hits
          hitsPerPage={ 6 }
          renderHit={ hit => <MyItemComponent item={ hit } /> }
        />
      </InstantSearch>
    );
  }
}

Some of the benefits i see in such an approach would be :

• the whole tree gets re-rendered when the parent component’s props or state are updated
• the context does not get lost : useful with libs relying on it such as react-router
• we get server-side rendering for free
• no risk of conflicts between different React versions
• maybe modularize dependencies to avoid bundling hogan or other libs that react apps won’t use

Would that be a big refactoring ? I understand the lib is not mainly targeting React apps, but as it is all React, it doesn’t seem too difficult. The reference to the search helper could be passed to the widgets via context

Sorry if all that’s already possible or off-topic.

[vvo]

We are going to create reusable React components with #920

[vvo]

Yes, I’d be very pleased too 😃 I’m Paris too and can make myself available this week when you want!

Can you send me an email to [e-mail] to further continue this discussion? We have plans to make instantsearch.js more React friendly, gradually