feat(hooks): introduce useConfigure (#3181)

Author: francoischalifour

examples/hooks/App.tsx

@@ -3,7 +3,7 @@ import algoliasearch from 'algoliasearch/lite';
 import React from 'react';
 import { InstantSearch } from 'react-instantsearch-hooks';
 
-import { Hits, SearchBox, RefinementList } from './components';
+import { Hits, SearchBox, RefinementList, Configure } from './components';
 
 import './App.css';
 
@@ -31,6 +31,8 @@ function Hit({ hit }: HitProps) {
 export function App() {
   return (
     <InstantSearch searchClient={searchClient} indexName="instant_search">
+      <Configure hitsPerPage={15} />
+
       <div
         style={{
           display: 'grid',

examples/hooks/components/Configure.tsx

@@ -0,0 +1,9 @@
+import { useConfigure, UseConfigureProps } from 'react-instantsearch-hooks';
+
+export type ConfigureProps = UseConfigureProps;
+
+export function Configure(props: ConfigureProps) {
+  useConfigure(props);
+
+  return null;
+}

examples/hooks/components/index.ts

@@ -1,3 +1,4 @@
+export * from './Configure';
 export * from './Hits';
 export * from './RefinementList';
 export * from './SearchBox';

packages/react-instantsearch-hooks/src/__tests__/useConfigure.test.tsx

@@ -0,0 +1,28 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import { createInstantSearchTestWrapper } from '../../../../test/utils';
+import { useConfigure } from '../useConfigure';
+
+describe('useConfigure', () => {
+  test('returns the connector render state', async () => {
+    const wrapper = createInstantSearchTestWrapper();
+    const { result, waitForNextUpdate } = renderHook(
+      () => useConfigure({ hitsPerPage: 40 }),
+      {
+        wrapper,
+      }
+    );
+
+    // Initial render state from manual `getWidgetRenderState`
+    expect(result.current).toEqual({
+      refine: expect.any(Function),
+    });
+
+    await waitForNextUpdate();
+
+    // InstantSearch.js state from the `render` lifecycle step
+    expect(result.current).toEqual({
+      refine: expect.any(Function),
+    });
+  });
+});

packages/react-instantsearch-hooks/src/index.ts

@@ -1,6 +1,7 @@
 export { default as version } from './version';
 export * from './InstantSearch';
 export * from './SearchIndex';
+export * from './useConfigure';
 export * from './useConnector';
 export * from './useHits';
 export * from './useRefinementList';

packages/react-instantsearch-hooks/src/useConfigure.ts

@@ -0,0 +1,17 @@
+import connectConfigure from 'instantsearch.js/es/connectors/configure/connectConfigure';
+
+import { useConnector } from './useConnector';
+
+import type {
+  ConfigureConnectorParams,
+  ConfigureWidgetDescription,
+} from 'instantsearch.js/es/connectors/configure/connectConfigure';
+
+export type UseConfigureProps = ConfigureConnectorParams['searchParameters'];
+
+export function useConfigure(props: UseConfigureProps) {
+  return useConnector<ConfigureConnectorParams, ConfigureWidgetDescription>(
+    connectConfigure,
+    { searchParameters: props }
+  );
+}