How to use the react-instantsearch/connectors.connectRefinementList function in react-instantsearch

To help you get started, we’ve selected a few react-instantsearch examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github joshwcomeau / guppy / src / components / DependencyManagementPane / DependencyInfoFromNpm.js View on Github external
latestVersion: string,
  lastUpdatedAt: number,
  isLoading: boolean,
};

type Props = {
  packageName: string,
  children: (info: NpmResult) => React$Node,
  isOnline: boolean,
};

type State = {
  refresh: boolean,
};

const FilterByIds = connectRefinementList(() => null);

const Result = connectHits(({ hits, packageName, children }: any) => {
  // InstantSearch is meant to deal with multiple results, but in this case,
  // we just want info on the 1 result.
  const [hit] = hits;

  if (!hit || hit.name !== packageName) {
    // TODO: Presumably there's a HOC to figure out loading state, I should
    // use that instead of just assuming if it doesn't exist, it's loading.
    return children({
      isLoading: true,
    });
  }

  const info = {
    name: hit.name,
github algolia / react-instantsearch / examples / react-native / src / Home.js View on Github external
<button>
        /* eslint-disable new-cap */
        Actions.Filters({
          searchState,
          onSearchStateChange,
        })
      }
      /* eslint-enable new-cap */
      title={`Filters (${items.length})`}
      color="#162331"
    /&gt;
  )
);
const VirtualRange = connectRange(() =&gt; null);
const VirtualRefinementList = connectRefinementList(() =&gt; null);
const VirtualMenu = connectMenu(() =&gt; null);
</button>
github algolia / react-instantsearch / examples / react-native-query-suggestions / App.js View on Github external
inverted
        /&gt;
        {text}
      
    
  );
};

Item.propTypes = {
  item: PropTypes.object,
  index: PropTypes.number,
  category: PropTypes.string,
  onPressItem: PropTypes.func,
};

const VirtualRefinementList = connectRefinementList(() =&gt; null);
github algolia / react-instantsearch / packages / react-instantsearch / examples / autocomplete / src / App-Hits-And-Facets.js View on Github external
indexName="bestbuy"
      &gt;
        <div>
          
          
          
          
          
        </div>
      
    );
  }
}

const VirtualSearchBox = connectSearchBox(() =&gt; null);
const VirtualRefinementList = connectRefinementList(() =&gt; null);

const connectAutoComplete = createConnector({
  displayName: 'AutoComplete',

  /*
   We retrieve all the values needed:
   - Current query
   - Hits
   - Facet values (given an array of attributes provided to the component)
   To work properly, you need to use Virtual Widgets for the SearchBox and all the
   facets you want the value of.
   */
  getProvidedProps(props, state, search) {
    const hits = search.results &amp;&amp; search.results.bestbuy
      ? search.results.bestbuy.hits
      : [];
github EnMarche / transformer.en-marche.fr / src / js / components / themes.js View on Github external
/&gt;
        )
    }

    render() {
        let { activeThemes, featuredThemes, otherThemes } = this.state

        return activeThemes
            .map(this.createListItems)
            .concat(featuredThemes.map(this.createListItems))
            .concat(this.props.children)
            .concat(otherThemes.map(this.createListItems))
    }
}

ThemeFilters = connectRefinementList(ThemeFilters)

export const ThemesList = ({
    onViewMore,
    themes,
    toggleTheme,
    location,
    match,
}) =&gt; (
    <ul>
         toggleTheme(theme, location, match)}
        &gt;</ul>
github algolia / react-instantsearch / examples / react-native / src / Categories.js View on Github external
/>
  );
}

Menu.propTypes = {
  query: PropTypes.string,
  saveQuery: PropTypes.func,
  searchForItems: PropTypes.func,
  refine: PropTypes.func,
  items: PropTypes.array,
  isFromSearch: PropTypes.bool,
};

const ConnectedMenu = connectMenu(Menu);
const VirtualSearchBox = connectSearchBox(() => null);
const VirtualRefinementList = connectRefinementList(() => null);
const VirtualRange = connectRange(() => null);
github algolia / react-instantsearch / examples / react-native / src / Rating.js View on Github external
});
    return (
      
    );
  }
}

const VirtualRefinementList = connectRefinementList(() =&gt; null);
const VirtualSearchBox = connectSearchBox(() =&gt; null);
const VirtualMenu = connectMenu(() =&gt; null);
const VirtualRange = connectRange(() =&gt; null);
const ConnectedRating = connectRange(Rating);
github jscoach / client / src / CheckboxList.js View on Github external
type="checkbox"
        checked={isRefined}
        onChange={e =&gt; {
          e.preventDefault();
          refine(value);
        }}
      /&gt;
      {label}
    
    {count &gt; 0 &amp;&amp; (
      <span>{count}</span>
    )}
  
);

const CheckboxList = connectRefinementList(({ items, attributeName, refine, createURL }) =&gt; (
  <div>
    {items.length === 0 &amp;&amp; <span>No filters available</span>}

    {items.map(item =&gt; (
      
    ))}
  </div>
));

export default CheckboxList;
github algolia / react-instantsearch / examples / react-native / src / Filters.js View on Github external
style={styles.mainContainer}
        /&gt;
      
    );
  }
}

Refinements.propTypes = {
  searchState: PropTypes.object.isRequired,
  refine: PropTypes.func.isRequired,
  onSearchStateChange: PropTypes.func.isRequired,
  items: PropTypes.array.isRequired,
};

const ConnectedRefinements = connectCurrentRefinements(Refinements);
const VirtualRefinementList = connectRefinementList(() =&gt; null);
const VirtualSearchBox = connectSearchBox(() =&gt; null);
const VirtualMenu = connectMenu(() =&gt; null);
const VirtualRange = connectRange(() =&gt; null);

export default Filters;
github EnMarche / transformer.en-marche.fr / src / js / components / themes.js View on Github external
<select value="{this.state.value}" placeholder="{T.translate('browse.filterTheme',">
        )
    }
}

ThemesDropdown = connectRefinementList(ThemesDropdown)

ThemesDropdown = connect(
    ({ themes: { themes, items, activeThemes }, locale }) =&gt; ({
        themesOptions: items
            .map(id =&gt; ({
                label: themes[id].titles[locale],
                value: id,
            }))
            .sort((a, b) =&gt; a.label.localeCompare(b.label)),
        themes,
        activeThemes,
        locale,
    }),
    dispatch =&gt; ({
        push: url =&gt; dispatch(push(url)),
        toggleTheme: theme =&gt; dispatch(toggleThemeFacet(theme)),</select>