Standalone React components

[vvo]

--- 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: #833

[redox]

All in 👍

[mwdwrd]

+1

[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.

[eyeinsky]

Not to insist, but what's the current estimate on getting this? :)

[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.

[darrylmack]

In the absence of standalone React Components, what is the current best practice for incorporating Algolia search(instant or not) with React applications?

[darrylmack]

HI @vvo

In React using ComponentDidMount works fine to retrieve the sample Best Buy data. -

import React from 'react'
import {render} from 'react-dom'
import algoliasearch from 'algoliasearch'

var client = algoliasearch('(app id)', '(api key)')
var index = client.initIndex('instant_search')

const App = React.createClass({
componentDidMount: function() {
index.search('iphone', function searchDone(err,content) {
console.log(err, content);
})
},
render() {
return (

Search

      <h2>Best result:</h2>
      <div id="best-result"></div>
  </div>
)

}
})

render(<App/>, document.getElementById('root'))

But using an event handler doesn't - Same Code

import React from 'react'
import {render} from 'react-dom'
import algoliasearch from 'algoliasearch'

var client = algoliasearch('(app id)', '(api key)')
var index = client.initIndex('instant_search')

const App = React.createClass({
handleSubmit: function() {
index.search('iphone', function searchDone(err,content) {
console.log(err, content);
})
},
render() {
return (

<button className="btn btn-primary"onClick={this.handleSubmit} >Search

      <h2>Best result:</h2>
      <div id="best-result"></div>
  </div>
)

}
})

render( <App/>, document.getElementById('root'))

Any idea why this is the case?

[vvo]

Hi @darrylmack, thanks a lot for reaching out here concerning your issue with react.

Can you open a new issue describing your problem only? It will ease the process

[ram535ii]

I agree, this would be really useful. As @jrasanen said, I'll also "kind of awkwardly append widget templates as strings inside a component", but since I'm using Angular ideally I'd like it to play nice with that.

What I would have wanted to do is this:

 instantsearch.widgets.hits({
      container: '#hits-container',
      templates: {
        empty: 'No results',
         item: "<ci-search-hit-dtv object-id=‘{{objectID}}'> </ci-search-hit-dtv>"
      },
      hitsPerPage: 6
    })

I was actually suprised when it didn't work, but clearly I don't understand HoganJS. Is this kind of thing what you are alluding to in this issue?

[darrylmack]

Hi @vvo

I got it working. I can capture a field value and submit and I get a json with the expected search results. I think the macro issue is that in React I have to wire up the resulting components. So a SearchResultsContainer -> SearchResult -> [ResultTitle, ResultDescription, ResultImage, etc. ].

Not hard to do but you guys clearly get React(see instantsearch.js). It would be great if there were prebuilt components for Algolia, i.e. SidebarComponent for faceted search, SearchResultsComponent that contained a child component with an individual SearchResult and so on.

The second issue is attaching instantsearch to a div id. Ideally we can just attach it to a component without specifying an id or ref.

Thanks though for making this great product. It will greatly enhance our application.

[vvo]

Hi @ram535ii and @darrylmack thanks for all your feedback. Just to be clear, today we do not have any pre-built React components and using instantsearch.js in React in not recommended.

Reusable React components will be made available via the creation of instantsearch.js/React in July.

Thanks for reaching out, I am locking this issue, if you want to discuss more please open a new issue.

[vvo]

(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