Feature: What is your use case for such a feature?

You can style directly third party components with styled-components this way:

import React from 'react';
import styled from 'styled-components';
import {Hits} from 'react-instantsearch';

const StyledHits = styled(Hits)`
  border: 1px solid black;
  background: red;

  .hit {
    display: block;
    border: 1px solid green;
  }
`;

[...]

return (
  <StyledHits 
       hitComponent={ ({name}) => <span className='hit'>{name}</span>) } 
  />
);

Feature: What is your proposed API entry? The new option to add? What is the behavior?

Every widget/component should accept className property for the root container.

The only question here is to figure out how to cleanly support components that have more than one child.

see also algolia/instantsearch#2089

Hi all,

I'm trying to build an @mention into a textarea, using antd Mention component. But it seems that new props aren't communicated properly to the connected component.

I created a small Fiddle to show the issue : https://jsfiddle.net/8r928c4y/16/

If it is a misuse rather than a bug, feel free to close the ticket of course ;)

Bug: What is the current behavior?
I believe new props are not communicated to child component. If the Fiddle, you can see that getProvidedProps is called on state change and returns hits as it should.

Bug: What is the expected behavior?
To retrieve matching hits from the Mention component

Bug: What browsers are impacted? Which versions?
Chrome v 49 at least

Thanks!

Bug: What is the current behavior?
Currently npm installs version 3.3.1 which doesn't include some vital bug fixes such as the critical bug addressed in commit a31fb4b

Bug: What is the expected behavior?
npm should install v4.0.0-beta5 and if users require v3.3.1 they should specify that in their package.json file.

Bug: What browsers are impacted? Which versions?
All applications using non-specific versions will be affected however those using non-specific versioning are usually able to adapt quickly and require the latest bug fixes.

I could really use the latest beta on npm. If not it means I have to bring react-instantsearch outside of the npm versioning system which I am very reluctant to do.

Thanks for your work so far, so much time has been saved with the react implementation 👍

Use case

You have a mobile app using React Native and you want to use a modal to display some filters. When this modal is closed, the widgets that sets the refinements are unmounted, therefore, they're not in the state anymore. see: algolia/instantsearch#2069

Need

Being able to say that a widget is persistent. That way its state will remain and can still be applied if a virtual widget is present.

Proposal

Add a prop isPersistent, that if present will indicate that nothing should happen inside the clean function.

Do you want to request a feature or report a bug?
Bug

Bug: What is the current behavior?
Whenever I click on a refinement, the hits do not update. If I go to the network tab, I see no request is made to the server.

Bug: What is the expected behavior?
Whenever I click on a refinement, a network request to Algolia is made and the hits are updated.

What is the version you are using? Always use the latest one before opening a bug issue.
4.0.0-beta3

Here's a sample code that illustrates how I'm using the Widgets:

<InstantSearch
  appId={/*...*/}
  apiKey={/*...*/}
  indexName={/*...*/}
>
  <SearchBox />
  <CurrentRefinements />
  <Menu attributeName="option_values.name" />
  <ClearAll />
  <Stats />
  <Hits />
  <Pagination showLast={true} />
</InstantSearch>

As a user of react-instantsearch, I may not be checking discourse every day so to be able to move to V4 I would be happy having a section in the guide like "Migration guides".

Where we could link to the release notes on discourse for every major version.

What do you think?

Do you want to request a feature or report a bug?
🆕 feature

Feature: What is your use case for such a feature?
🎨 Using a CSS framework without needing to create custom connectors/widgets

Feature: What is your proposed API entry? The new option to add? What is the behavior?
📦 Maybe use the <Configure /> or the <InstantSearch /> components, for which we could add a prop to pass an object with CSS classes we want to apply based on default RIS classes. Example for the pagination using Bulma:

{
  "ais-Pagination__root": "pagination-list",
  "ais-Pagination__itemPrevious": "pagination-previous",
  "ais-Pagination__itemNext": "pagination-next",
  "ais-Pagination__item": "",
  "ais-Pagination__itemLink": "pagination-link",
}

(In this case it would not be perfect because Bulma needs a wrapper with the .pagination class and RIS doesn't wrap the <ul>, but that's another problem 😊 )

Note: if you have another –easy– suggestion with an example to do the same thing, I'm happy to try!

What is the version you are using? Always use the latest one before opening a bug issue.
📅 Latest

Do you want to request a feature or report a bug?

Feature

Feature: What is your use case for such a feature?

Require loading/error info for React Native app.

Feature: What is your proposed API entry? The new option to add? What is the behavior?

Could you please add the loading (currently under searchResults.searching) and error variables as provided props for all the Hits connectors (connectHits, connectHitsPerPage and connectInfiniteHits)? They are very useful in slow/unreliable internet situations.

What is the version you are using? Always use the latest one before opening a bug issue.

3.3.1.

Use case

The recipe demonstrating the connectAutoComplete uses <VirtualHits/>. It's because without them, no particular search parameters are computed for every <Index/>.

Need

This syntax is not very straightforward. Ideally we want to get rid of them.

Proposal

<Index> should be seen as a widget, like the <Hits>. That way it will be taken into account when computing search parameters.

Use case

Today we have a recipe that show how to use React Native with React InstantSearch demonstrating only an infinite scroll with a searchbox. We need to go further than this by proposing a fully featured example using React Native app.

Doing this will also help you know if:

• we miss any API that could be helpful with React Native. See #14
• we need to package widgets for React Native

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html

React.PropTypes is deprecated. We should now use the prop-types package.

Question

Should MultiRange accept Object typed variables passed to it's label property to support JSX? Currently it throws a warning as it only expects type String.

Hi,

When implementing multi-index search, following the example:
https://github.com/algolia/react-instantsearch/blob/master/packages/react-instantsearch/examples/multi-index/src/App.js

My code:
https://screencast.com/t/emslqzaPHH

The hit results are showing correctly for the second index (artists), but for the first index (songs) no results are being displayed. And I see that in the Network tab (Developer Tools), the REST calls shows hit results for both of them.

Any help would be very much appreciated.
Thanks!

When an unused import is present, the build is not failing anymore.

This might be related to the addition of prettier.

When loading a page that use the infinite hits widget on a page that is not the first one (eg. page 3), neither the connector or the widget loads the previous pages for the initial rendering.

The question is: should we load the previous pages?

Use case

Today, to have a Range widget with React InstantSearch you need to build your own, or use an external component. We provide several code sample to show how this can be achieved using rheostat from airbnb.

Need

This code sample is getting pretty big right now and it would be better to propose to our user a packaged Range component, ready to use outside of the box.

Proposal

TBD.

We got two options here: either we built our own again, or we use rheostat or rc-slider but with a limited api.

Do you want to request a feature or report a bug?

bug

Bug: What is the current behavior?

docsearch clear button only dismisses the popup

Bug: What is the expected behavior?

clear button clears the search and dismisses the popup

Bug: What browsers are impacted? Which versions?

All?

What is the version you are using? Always use the latest one before opening a bug issue.

https://community.algolia.com/react-instantsearch/

Use case

When using https://zeit.co/blog/next you can use React InstantSearch but won't benefit of a good SEO (having all the results since the first rendering).
See: algolia/instantsearch#1687

Need

Being compatible

Proposal

TBD. Needs a POC.

The helper is able to give us the Hierarchical Facet BreadCrumb through https://community.algolia.com/algoliasearch-helper-js/reference.html#AlgoliaSearchHelper#getHierarchicalFacetBreadcrumb

We should add a new widget/connector that allow a user to add this into its website.

• Propose an API for the connector (Provided Props / Exposed Props)
• Propose an API for the widgets
• Propose a default style
• Decide if we go for an option within the connectHerarchicalMenu or with a new connector.
• Implement connector
• Implement widgets
• Add stories
• Document the need for a virtual Hierarchical Menu for the default refinement

With this storybook addon: https://github.com/Kilix/storybook-addon-jsx, we have the opportunity to display examples just near their story. It could also be an opportunity to remove all our static examples (with a link to the right story...).

Do you want to request a feature or report a bug?

bug

You can see this in https://jsfiddle.net/ar80rgpc/6/ actually

Bug: What is the current behavior?

when pagesPadding = 3 (default), two are visible before, and four after.

When pagesPadding = 0, clicking the current page goes to the next page, and the current page is clickable, while it should show as enabled. It also starts at 2, and not 1.

I have a suspicion that this all has the same root cause

Bug: What is the expected behavior?

The off-by-one error to be fixed 😄

Bug: What browsers are impacted? Which versions?

Do you want to request a feature or report a bug?

bug

Bug: What is the current behavior?

connectAutocomplete assumes that there are multiple indices, and this iterates over all of the keys to aggregate the hits

Bug: What is the expected behavior?

it should only do that if we’re in a multi-index context

We released in beta the new <Index> widget that allows people to simply do multi index requests. We want to advertise this feature in order to build fully featured autocomplete.

We already have a recipe to show how to use an external autocomplete but we miss an example showing how you can achieve the same thing using only React InstantSearch.

Goal

Building an autocomplete menu that allows navigation with keyboard.

Do you want to request a feature or report a bug?

bug

Bug: What is the current behavior?

The values get truncated by transformValue before the transformItems is applied, that means that the truncation will change the sort

see connectHierarchicalMenu.js#L188-L193

Bug: What is the expected behavior?

transformItems to be applied before transformValue, or the showMore truncation to happen after transformItems

cc @JStonevalley

Do you want to request a feature or report a bug?

Feature

Feature: What is your use case for such a feature?

You can see easily how an example looks

Feature: What is your proposed API entry? The new option to add? What is the behavior?

Adding either a deploy.now.sh button, deploying them in CI or making sure netlify deploys this too

What is the version you are using? Always use the latest one before opening a bug issue.

4.0.0-beta.6

The following pages have broken links to Discourse.

We should update the links to point to https://discourse.algolia.com/tags/react-instantsearch

The affected pages are:
https://community.algolia.com/react-instantsearch
https://community.algolia.com/react-instantsearch/examples/Demos.html
https://community.algolia.com/react-instantsearch/examples/Recipes.html

Using react-instantsearch 3.3.1, I tried to set up conditional rendering during loading per the docs, but searchResults.loading comes up undefined. Here's my code:

export default createConnector({
  displayName: 'SearchResults',
  getProvidedProps(props, searchState, searchResults) {
    const totalHits = searchResults.results ? searchResults.results.nbHits : 0
    console.log(searchResults);
    return {
      isLoading: searchResults.loading,
      totalHits
    }
  },
})(ConnectedHits)

When logging searchResults there, I get {results: SearchResults, searching: true, error: null} so I tried returning { isLoading: searchResults.searching, totalHits }, which gives me real values. So it seems the docs for conditional display need to be updated.

The goal here is to create a new application using React InstantSearch and very if the build contains only imported functions.

For example by importing <InstantSearch>, <SearchBox> and <connectHits>.

If not, actions should be taken to fix it.

React 16 is coming. Until then the facebook team plans to release React version that will help migrating to it.

We need to migrate to React 15.5 and fix everything that is going to be deprecated.

Feature Request

Currently its not clear how defaultRefinement behaves - it should be clearer that reseting / removing the refinement with refine(null) (or equivalent) will not remove the refinement if the defaultRefinement is set, but rather reset the refinement to the defaultRefinement.

Additionally I have use for an initialRefinement which acts like defaultRefinement except will actually be removed when refine(null) is called. I know there are ways to do initialRefinement now, but its not immediate how one should best implement it (to minimize API calls)

Edit: Additionally its not clear when a refinement is reset or not if we use defaultRefinement (as checking that the currentRefinement === defaultRefinement is not sufficient to know that its reset) (also the case with connectRange falling back to max & min values in lieu of defaultRefinement, when its not provided)

• contrast issue
  • contrast of icon is too low
• add aria-label or title on input search
• add aria-hidden=‘true’ on decorative svg
• move focus back to search box when clear is pressed

Also to be thought together with adding a way to focus hits by default, then we can move the focus to the first hit on submit

Do you want to request a feature or report a bug?

A bit of both

Bug: What is the current behavior?

Travis and Netlify both run the docs

Bug: What is the expected behavior?

Travis runs the tests, Netlify the docs

Feature: What is your use case for such a feature?

Faster builds

Feature: What is your proposed API entry? The new option to add? What is the behavior?

Change the command ran by Travis to only do the tests

What is the version you are using? Always use the latest one before opening a bug issue.

4.0.0-beta.1

Do you want to request a feature or report a bug?

Feature (question): I would like to disable Geo-search filtering for records which don't have coordinates. This seems to be currently impossible in the settings, so it seems I could do this by splitting the non-coordinate records into a separate index & then using multi-index. However I am wondering whether this will work using the multi-index feature in react-instantsearch@beta.

Essentially I would put <Configure aroundRadius="5000" minimumAroundRadius="2500" aroundLatLng={aroundLatLng} /> inside the <Index> component and would it only apply to that index? (Its not clear from docs that this will work)

Its also not clear whether I can use multiple <Index/> HOC's with the same indexName (because of the way my component tree is structured

USING REACT-INSTANTSEARCH.JS

Do you want to request a feature or report a bug?
Feature [maybe bug :)]

What is the current behavior?
When searching if I go to page 2/3 then change the query in the searchbox it doesn't reset to page 1 so when you then have less than page x * number_of_items_per_page results you get a blank search result. I've had a few users confused by this.

If the current behavior is a bug, please provide all the steps to reproduce and a minimal
JSFiddle example or a repository on GitHub that we can npm install
and npm start.

What is the expected behavior?
&p query parameter gets changed to 0 when SearchBox changes

We should be able to use multiple <Configure> under one <InstantSearch/> like:

<InstantSearch>
    <Configure hitsPerPage={10}/>
    <Configure distinct={true}/>
</InstantSearch>

See: algolia/instantsearch#2006

Hello all,

I tried to update from v3 to v4 in order to use multi-indexing.
Now, all it does is returning an error on line 145 of createInstantSearchManager.js because Object.values is not function.

Any insight on this would be greatly appreciated!

Bug: What is the current behavior?

Updating to 4.0.0-beta.0 and up breaks basic working examples.
See: https://jsfiddle.net/8r928c4y/ where I just updated the dependency to 4.0.0-beta.2

Bug: What is the expected behavior?

Seamless update from v3 to v4!

Bug: What browsers are impacted? Which versions?

I'm working on Chrome but any browser I believe.

Thank you for your time,
Hugo

Do you want to request a feature or report a bug?

bug

Bug: What is the current behavior?

Bug: What is the expected behavior?

Bug: What browsers are impacted? Which versions?

Use case

Your records contain a field that is an array of strings and you want to highlight them.

Need

The <Highlight/> and <Snippet/> widgets are not compatible with an array of strings.

Proposal

TBD

See algolia/instantsearch#1932

Use case

You have an instant search page with results and wants to add a link on each one of them to redirect to a detailed page with only one result.

Need

We need a new widget that will be able to fetch one result (through getObject).

Proposal

TBD

Hey,

I am displaying results in my Single Page Application with <Hits />.

After adding a new Page (including Indexing) I would like to trigger a refresh of the Hits.

client.clearCache() does not work.

Any hints?

Highlighting turns unicode/emojis into question mark symbols.
JavaScript's String#split (and other similar functions) are not unicode-compliant, so would need a compliant library to handle the string operations.

https://github.com/algolia/react-instantsearch/blob/master/packages/react-instantsearch/src/core/highlight.js#L52

I believe using lodash for the string operation (which is included already) would allow this functionality to work out of the box.

https://github.com/lodash/lodash/blob/4.17.4/lodash.js#L14565

The autocomplete example that uses multiple indexes: https://github.com/algolia/react-instantsearch/blob/master/packages/react-instantsearch/examples/autocomplete/src/App-Multi-Index.js

Is not working for me. There is an error showing up:
https://screencast.com/t/saLZ5A1k6

Any help would be very much appreciated.
Thanks!

Do you want to request a feature or report a bug?

feature

Bug: What is the current behavior?
If one of these values is null, I get a bad request:

<Configure
  aroundLatLng={listing.aroundLatLng}
  insideBoundingBox={listing.insideBoundingBox}
/>

So I have to do:

const configure = {};
if (listing.aroundLatLng) configure.aroundLatLng = listing.aroundLatLng;
if (listing.insideBoundingBox)
  configure.insideBoundingBox = listing.aroundLatLng;

Bug: What is the expected behavior?

To be able to pass null values and the component not pass them through to algolia

What is the version you are using? Always use the latest one before opening a bug issue.

react-instantsearch 3.3.1

info

reported by @zackify in algolia/instantsearch#2099

See #61.

We should explain in our documentation that when clearing all refinements, default refinements are not removed.

In the same time it would be nice to check for every connector how their refine function works, to set or remove a refinement. It should be consistent, but today it's not (for instance: connectRange).

We should wrote a guide about those results.

Question

I have a React+Redux application where I reproduce search state from a query URL. It seems passing this search state to the InstantSearch component is not sufficient enough to reproduce the search. Do I need to use virtual widgets to reproduce the refinements? If so this seems a bit clunky as I'll have to have many virtual widgets each reproducing refinements. Also if this is the case you may want to update the documentation on Search State to explicitly state widgets/virtual widgets must be present for the refinements.

Do you want to request a feature or report a bug?

feature request.

Feature: What is your use case for such a feature?

Our use case is to support customized columns, for example:

// Search Component
class App extends React.Component {
  render() {
    const { columns } = this.state;
    return (
      <InstantSearch
        appId="latency"
        apiKey="3d9875e51fbd20c7754e65422f7ce5e1"
        indexName="bestbuy"
      >
       <Search/>
       <Hits hitComponent={HitComponent} hitComponentProps={{ columns }}
      </InstantSearch>
    );
  }
}

// HitComponent
class HitComponent extends React.PureComponent {
  render() {
    const { hit, columns } = this.props;
    return (
      <div>
        {columns.map(column => (<div key={column}>{hit[column]}</div>))
      </div>
    };
  }
}

What project are you opening an issue for?

• react-instantsearch

Do you want to request a feature or report a bug?

feature

Feature: What is your use case for such a feature?

You can easily use the Places index

Feature: What is your proposed API entry? The new option to add? What is the behavior?

adding a placesApiKey prop to <InstantSearch /> will allow you to use an <Index> with the places index.

In is.js places is handled as a separate widget, but then it has the dropdown etc. too, I think that's a different issue.

cc @raphi

Im tired of filling and reading the issue guidelines. Title is self explanatory

Do you want to request a feature or report a bug?
Submit a feature.

Feature: What is your use case for such a feature?
I use the <Menu /> component in order to filter my items according to some tags. Tags have this format:

{
      "id": 3,
      "name": "Développement",
      "position": 1
}

And the component is used like this:

<Menu
    attributeName="tags.name"
    transformItems={ transformItems }
/>

The <Menu /> component has a prop transformItems : I use it in order to sort the menu items according to tag name:

function transformItems(items) {
    return items.sort((a, b) => a.label.localeCompare(b.label));
}

The items parameter received by this function is NOT an array containing my tags, but an array filled with another shape of objects (that's why I need to compare the label property and not the name one).

It's fine if I want to order by tags names, but what if I want to order by the position property?
The goal is to highlight some menu items, but not according to number of results, just arbitrarily (that's why we have a position property in our tags).

The issue here is that the transformItems function doesn't receive the original tag. I'm quite sure it's by design, but it could be great if we could access other properties, instead just the one sent via attributeName.

Feature: What is your proposed API entry? The new option to add? What is the behavior?
It would be awesome if we can access the whole object properties from the transformItems function. Maybe as second parameters ? Or inside a subproperty ?

Or maybe I've missed something and I don't use the right options to do what I need to achieve: if it's the case, sorry for that!

What is the version you are using? Always use the latest one before opening a bug issue.
I use the version 3.3.2.

Thanks in advance!

Need Hierarchical Menu that is disjunctive. react-instantsearch 3.2.1 is current;y being used
Similar to Refinement List but in a tree format.

Use case when be when filtering by location and want to have multiple locations possible.

EX.

Index has record attribute...
record 1

geography: {
   lvl0: "North America",
   lvl1: "US",
   lvl2: "MI"
}

record 2

geography: {
   lvl0: "Asia-Pacific",
   lvl1: "China"
}

Hierarchical Menu only allows one to be selected, need to be able to expand both North america and Asia-pacific and filter by Asia-Pacific>China or North America>US