npm

Need private packages and team management tools?Check out npm Orgs. »

This package has been deprecated

Author message:

You can now use react-instantsearch for a more full-featured Algolia experience with React

react-algoliasearch-helper

1.2.1 • Public • Published

react-algoliasearch-helper

Version Build Status License Downloads

React <Provider> and connect(WrappedComponent) for algoliasearch-helper.

Its goal is to make building React applications with Algolia easier by allowing easy access to the algoliasearch-helper.

Table of Contents

Install

npm install react-algoliasearch-helper --save

Example

SearchBox.js

import React from 'react';
import {connect} from 'react-algoliasearch-helper';
 
export default connect()(
  ({helper}) =>
    <input
      placeholder="Search here"
      autoFocus
      onChange={e => helper.setQuery(e.target.value).search()}
    />
);

Hits.js

import React, {PropTypes} from 'react';
import {connect} from 'react-algoliasearch-helper';
 
const Results = ({results}) => {
  if (!results) return <div/>;
  return <div>{results.hits.map(hit => <div key={hit.objectID}>{hit.Name}</div>)}</div>;
};
 
Results.propTypes = {
  results: PropTypes.object
};
 
export default connect(
  state => ({results: state.searchResults})
)(Results);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import algoliasearch from 'algoliasearch';
import algoliasearchHelper from 'algoliasearch-helper';
import {Provider} from 'react-algoliasearch-helper';
import SearchBox from './components/SearchBox.js';
import Hits from './components/Hits.js';
 
const client = algoliasearch('latency', 'ffc36feb6e9df06e1c3c4549b5af2b31');
const helper = algoliasearchHelper(client, 'starbucks');
 
const App = () =>
  <Provider helper={helper}>
    <div>
      <SearchBox/>
      <Hits/>
    </div>
  </Provider>;
 
ReactDOM.render(<App/>, document.querySelector('#root'));

API

<Provider helper>

Makes the Algolia Search helper available to the connect() calls in the component hierarchy below. You can’t use connect() without wrapping your root component in .

Props

Example

ReactDOM.render(
  <Provider helper={helper}>
    <MyRootComponent />
  </Provider>,
  rootEl
)

connect([mapStateToProps])(WrappedComponent)

Connects a React component to the helper.

Arguments

  • [mapStateToProps(state, ownProps): stateProps] (function): if specified, the component will subscribe to helper events (change, search, result, error). Allowing you to compute props for your wrapper component based on the search state.

Search state shape

Every function passed to mapStateToProps argument of connect will be given an search state object with those properties:

  • searching (boolean): true when a search request is pending, false otherwise
  • searchParameters (object): helper's SearchParameters
  • searchResults (object): helper's SearchResults
  • searchResultsSearchParameters (object): SearchParameters that yielded the current SearchResults
  • searchError (Error): When the search fails

Remarks

  • It needs to be invoked two times. The first time with its arguments described above, and a second time, with the component: connect([mapStateToProps])(WrappedComponent).
  • It does not modify the passed React component. It returns a new, connected component, that you should use instead.
  • Most probably, you will use connect as in export default connect()(WrappedComponent).

Examples

Forward helper to the RefinementList component:

export default connect()(RefinementList)

Receive results in the Hits component:

export default connect(
  state =>
    ({
      results: state.searchResults
    })
)(Hits) // Hits component will receive a `results` property everytime new results are available

Tests

Tests are written with Jest.

npm test
npm run test:watch
npm run lint

Dev

npm start

Release

npm run release

install

npm i react-algoliasearch-helper

Downloadsweekly downloads

26

version

1.2.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability