--- 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
react-instantsearch is a react specific UI library for Algolia, much easier than react-algoliasearch-helper --- / NOTE FROM MAINTAINERS ---
react-algoliasearch-helper
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
;; <input placeholder="Search here" autoFocus onChange= helper />;
Hits.js
;; const Results = { if !results return <div/>; return <div>resultshits</div>;}; ResultspropTypes = results: PropTypesobject; results: statesearchResultsResults;
index.js
;;;;;;; const client = ;const helper = ; const App = <Provider helper=helper> <div> <SearchBox/> <Hits/> </div> </Provider>; ReactDOM;
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
helper
(algoliasearch-helper-js):children
(ReactElement) The root of your component hierarchy.
Example
ReactDOM
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 otherwisesearchParameters
(object): helper's SearchParameterssearchResults
(object): helper's SearchResultssearchResultsSearchParameters
(object): SearchParameters that yielded the current SearchResultssearchError
(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 inexport default connect()(WrappedComponent)
.
Examples
Forward helper
to the RefinementList
component:
RefinementList
Receive results
in the Hits
component:
results: statesearchResults Hits // Hits component will receive a `results` property everytime new results are available
Tests
Tests are written with Jest.
npm testnpm run test:watchnpm run lint
Dev
npm start
Release
npm run release