Standalone React components

— NOTE FROM MAINTAINERS — (Sept 2016) We are working on react-instantsearch, it’s already working. Ping me on twitter: https://twitter.com/vvoyer if you want to be an alpha tester — / NOTE FROM MAINTAINERS —

instantsearch.js is currently a collection of smart JavaScript widgets rendering dumb React components.

• smart as “I know how to manipulate the helper to refine this brand list”
• dumb as “Give me a data list and a click function and I will display them”

This worked well for a lot of people but not for people already using React (or Angular, React Native, ractive, vuejs or any framework with his own concepts like state, scope, JSX …).

To progressively solve this situation, we should first try to build the famous instant search demo with React only and see how it goes.

It would be a first POC at making instantsearch.js React friendly.

To avoid making instantsearch.js React friendly ONLY (and miss Angular or others), we should be careful about how we organize code. For instance, the function knowing how to refine a facet should be extracted and reused inside the component.

The ultimate goal of this POC is to be able to (not actual API, only for issue):

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>
    );
  }
}

While still being able to do:

// From react
import { InstantSearch, SearchBox, Hits, Pagination } from 'instantsearch.js/react';
// From another environment
import instantsearch from 'instantsearch.js';

Relevant discussion: https://github.com/algolia/instantsearch.js/issues/833

[vvo]

Hi @eyeinsky no news nor estimate for the moment we are trying hard to make this happen of course we want to allow our React users to easily start with Algolia.

If you have a specific React + Algolia question in the meantime feel free to drop it here.

[jrasanen]

👍

I bumped into this issue too today.

Thinking of either writing my own components in React using the JS api only and not using instantsearch.js. Or use this & kind of awkwardly append widget templates as strings inside a component.

Probably gonna do the latter and keep watching this thread.