feat(dependencies): react-instantsearch-hooks -> react-instantsearch

README.md

@@ -29,7 +29,7 @@ Before proceeding, please make sure you have the following:
 
 ### How to run the apps
 
-To init and install dependancies please use :
+To init and install dependencies please use :
 
     pnpm install
 
@@ -62,4 +62,5 @@ The Boilerplate is highly scalable, and customizable. It is made with ReactInsta
 By following the steps described in this documentation you will be able to build your own Algolia application in matter of minutes.
 
 Happy Coding!
+
 # boilerplate-demo-with-neural

apps/boilerplate-documentation/docs/02-Getting Started/structure.md

@@ -19,7 +19,7 @@ sidebar_position: 2
 - called by Index.jsx
 - calls Main.jsx
 - Wraps child components in Algolia Instantsearch
-  - [Algolia instantsearch](https://github.com/algolia/react-instantsearch)
+  - [Algolia React InstantSearch](https://github.com/algolia/instantsearch)
 
 ### Main.jsx
 

apps/boilerplate-front-end/README.md

@@ -90,7 +90,7 @@ App.jsx
 - called by Index.jsx
 - calls Main.jsx
 - Wraps child components in Algolia Instantsearch
-  - [Algolia instantsearch](https://github.com/algolia/react-instantsearch)
+  - [Algolia React InstantSearch](https://github.com/algolia/instantsearch)
 
 Main.jsx
 
@@ -848,7 +848,7 @@ Scan through our [existing issues](https://github.com/algolia/algolia-react-boil
 - Using the command line:
   - [Fork the repo](https://docs.github.com/en/github/getting-started-with-github/fork-a-repo#fork-an-example-repository) so that you can make your changes without affecting the original project until you're ready to merge them.
 
-2. Install or update all the needed dependancies. You can do so by following our [Getting started Section](#️-get-started)
+2. Install or update all the needed dependencies. You can do so by following our [Getting started Section](#️-get-started)
 
 3. Create a working branch and start with your changes!
 
@@ -895,19 +895,19 @@ nvm use 14
 
 ### pnpm version
 
-Your pnpm version should higher than 8.0.0 to avoid any dependancy issue with InstantSearch Hooks package.
+Your pnpm version should higher than 8.0.0 to avoid any dependency issue with InstantSearch Hooks package.
 
 If you still get any issue using pnpm you can try using `yarn` or `npm`. You might also want to try with `npm install --force`
 
 ### package issue
 
-If you encounter an issue with the package react-instantsearch-hooks-web please try to install the dependancies with npm or yarn as mentionned above.
+If you encounter an issue with the package react-instantsearch please try to install the dependencies with npm or yarn as mentioned above.
 
 If you encounter an issue with turbo-darwin-64 please install the package in the front-end folder with your package manager of choice.
 
 ### Sass - Scss compiler
 
-If you are unable to install sass library or you simply don't want to use it whithin the app, we are providing in each folder in a `compiled CSS` subfolder the compiled and the minified CSS of our Scss files.
+If you are unable to install sass library or you simply don't want to use it within the app, we are providing in each folder in a `compiled CSS` subfolder the compiled and the minified CSS of our Scss files.
 
 Feel free to use it.
 

apps/boilerplate-front-end/package.json

@@ -46,7 +46,7 @@
     "algoliasearch": "4.14.2",
     "framer-motion": "^7.0.0",
     "i18next": "^21.8.11",
-    "instantsearch.js": "^4.49.2",
+    "instantsearch.js": "^4.60.0",
     "lodash": "^4.17.21",
     "lodash.debounce": "^4.0.8",
     "npm": "^8.5.5",
@@ -57,7 +57,7 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^11.17.4",
     "react-icons": "^4.8.0",
-    "react-instantsearch-hooks-web": "^6.42.2",
+    "react-instantsearch": "^7.3.0",
     "react-router-dom": "6.3.0",
     "recoil": "^0.7.4",
     "sass": "^1.49.0",

apps/boilerplate-front-end/src/App.jsx

@@ -8,7 +8,7 @@ import { mainIndex } from '@/config/algoliaEnvConfig'
 import { searchClient } from './config/algoliaEnvConfig'
 
 // Algolia Instantsearch components
-import { InstantSearch } from 'react-instantsearch-hooks-web'
+import { InstantSearch } from 'react-instantsearch'
 
 // Import Components
 import Main from './Main'

apps/boilerplate-front-end/src/Main.jsx

@@ -8,7 +8,7 @@ import {
   Configure,
   useInstantSearch,
   useSearchBox,
-} from 'react-instantsearch-hooks-web'
+} from 'react-instantsearch'
 
 // Algolia Insights
 import { InsightsMiddleware } from './config/algoliaInsightEvents'

apps/boilerplate-front-end/src/components/algoliaExplain/appliedRules/AppliedRules.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 
-import { useInstantSearch } from 'react-instantsearch-hooks-web'
+import { useInstantSearch } from 'react-instantsearch'
 
 import { useRecoilState, useRecoilValue } from 'recoil'
 

apps/boilerplate-front-end/src/components/banners/Banner.jsx

@@ -2,7 +2,7 @@
 // The queryRuleCustomData widget displays custom data from Rules.
 // You use this widget to display banners or recommendations returned by Rules, and that match search parameters.
 
-import { useQueryRules } from 'react-instantsearch-hooks-web'
+import { useQueryRules } from 'react-instantsearch'
 
 //SCSS import
 import './SCSS/banner.scss'

apps/boilerplate-front-end/src/components/banners/HomeBanners.jsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from 'react'
 import { useRecoilValue } from 'recoil'
 
 // This component will be wrapped in connectQueryRules (https://www.algolia.com/doc/api-reference/widgets/query-rule-custom-data/react/#connector)
-import { useQueryRules } from 'react-instantsearch-hooks-web'
+import { useQueryRules } from 'react-instantsearch'
 
 // Imports from router
 import { Link } from 'react-router-dom'

apps/boilerplate-front-end/src/components/carousels/HomeCarousel.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 
 import { motion } from 'framer-motion'
-import { Configure, Index, useHits } from 'react-instantsearch-hooks-web'
+import { Configure, Index, useHits } from 'react-instantsearch'
 
 // Recoil
 import { useRecoilValue, useSetRecoilState } from 'recoil'

apps/boilerplate-front-end/src/components/cart/CartModal.jsx

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from 'react'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 
 // Algolia imports
-import { useHits } from 'react-instantsearch-hooks-web'
+import { useHits } from 'react-instantsearch'
 
 //Use Translation
 import { useTranslation } from 'react-i18next'

apps/boilerplate-front-end/src/components/facets/Facets.jsx

@@ -5,7 +5,7 @@ import {
   DynamicWidgets,
   useRefinementList,
   useInstantSearch,
-} from 'react-instantsearch-hooks-web'
+} from 'react-instantsearch'
 
 // Import magnifying glass svg, and price slider component
 import { ChevronDown, ChevronUp, Glass } from '@/assets/svg/SvgIndex'

apps/boilerplate-front-end/src/components/facets/components/ClearRefinement.jsx

@@ -2,7 +2,7 @@
 
 import { navigationStateAtom } from '@/config/navigationConfig'
 import { useEffect } from 'react'
-import { useClearRefinements } from 'react-instantsearch-hooks-web'
+import { useClearRefinements } from 'react-instantsearch'
 import { useSearchParams } from 'react-router-dom'
 import { useRecoilState } from 'recoil'
 

apps/boilerplate-front-end/src/components/facets/components/CurrentRefinement.jsx

@@ -1,5 +1,5 @@
 // Component that renders the Current Refinements (icons above the products)
-import { useCurrentRefinements } from 'react-instantsearch-hooks-web'
+import { useCurrentRefinements } from 'react-instantsearch'
 // Recoil State
 import { useRecoilState } from 'recoil'
 // import config file for state of facets

apps/boilerplate-front-end/src/components/facets/components/Hierarchical.jsx

@@ -1,5 +1,5 @@
 // Renders the Hierarchical facets
-import { useHierarchicalMenu } from 'react-instantsearch-hooks-web'
+import { useHierarchicalMenu } from 'react-instantsearch'
 
 //Use Translation
 import { useTranslation } from 'react-i18next'

apps/boilerplate-front-end/src/components/facets/components/PriceSlider.jsx

@@ -7,7 +7,7 @@ import { useRecoilState } from 'recoil'
 import Slider from 'rc-slider'
 import 'rc-slider/assets/index.css'
 // Import the range function from IS hook
-import { useRange } from 'react-instantsearch-hooks-web'
+import { useRange } from 'react-instantsearch'
 // import Currency from recoil
 import { currencySymbolAtom } from '@/config/currencyConfig'
 import { showNetworkErorrs } from '@/config/demoGuideConfig'

apps/boilerplate-front-end/src/components/federatedSearch/FederatedSearch.jsx

@@ -1,7 +1,7 @@
 import { memo, useEffect, useState } from 'react'
 
 // Algolias's import
-import { Configure, Index } from 'react-instantsearch-hooks-web'
+import { Configure, Index } from 'react-instantsearch'
 
 // framer motion
 import { motion } from 'framer-motion'
@@ -60,7 +60,7 @@ import RecentSearches from './components/RecentSearches'
 //Import scope SCSS
 import './SCSS/federatedSearch.scss'
 
-import { useSearchBox } from 'react-instantsearch-hooks-web'
+import { useSearchBox } from 'react-instantsearch'
 import QueryCat from './components/QueryCat'
 
 const FederatedSearch = ({ query, refine, results }) => {

apps/boilerplate-front-end/src/components/federatedSearch/components/BlogPost.jsx

@@ -2,7 +2,7 @@
 import { memo } from 'react'
 
 // Algolia
-import { useHits } from 'react-instantsearch-hooks-web'
+import { useHits } from 'react-instantsearch'
 
 import { useRecoilValue } from 'recoil'
 

apps/boilerplate-front-end/src/components/federatedSearch/components/Category.jsx

@@ -4,7 +4,7 @@ import { memo } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 // Algolia's imports
-import { useRefinementList } from 'react-instantsearch-hooks-web'
+import { useRefinementList } from 'react-instantsearch'
 
 // component import
 import { ChevronRight } from '@/assets/svg/SvgIndex'

apps/boilerplate-front-end/src/components/federatedSearch/components/Products.jsx

@@ -1,7 +1,7 @@
 import { memo } from 'react'
 
 // Algolia's imports
-import { Highlight, useHits } from 'react-instantsearch-hooks-web'
+import { Highlight, useHits } from 'react-instantsearch'
 
 // Component import
 import { ChevronRight } from '@/assets/svg/SvgIndex'

apps/boilerplate-front-end/src/components/federatedSearch/components/QuerySuggestions.jsx

@@ -4,7 +4,7 @@ import { memo, useMemo } from 'react'
 import { debounce } from 'lodash'
 
 // Algolia's imports
-import { Highlight, useHits } from 'react-instantsearch-hooks-web'
+import { Highlight, useHits } from 'react-instantsearch'
 
 // components import
 import { ChevronRight } from '@/assets/svg/SvgIndex'

apps/boilerplate-front-end/src/components/header/components/HeaderMobile.jsx

@@ -40,7 +40,7 @@ import {
 } from '@/config/featuresConfig'
 import useOutsideClick from '@/hooks/useOutsideClick'
 import usePreventScrolling from '@/hooks/usePreventScrolling'
-import { useSearchBox } from 'react-instantsearch-hooks-web'
+import { useSearchBox } from 'react-instantsearch'
 
 const HeaderMobile = ({ mobile, tablet }) => {
   const { query, refine } = useSearchBox()

apps/boilerplate-front-end/src/components/header/components/Navigation.jsx

@@ -23,7 +23,7 @@ import {
   useHierarchicalMenu,
   useRefinementList,
   useSearchBox,
-} from 'react-instantsearch-hooks-web'
+} from 'react-instantsearch'
 import { localSearchQueryAtom } from '@/config/searchboxConfig'
 import ConditionalWrapper from '@/utils/ConditionalWrapper'
 

apps/boilerplate-front-end/src/components/hits/Hit.jsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 // Import framer-motion for animation on hits
 import { AnimatePresence, motion } from 'framer-motion'
 
-import { Highlight } from 'react-instantsearch-hooks-web'
+import { Highlight } from 'react-instantsearch'
 // Import SVGs
 import { CartPicto, Heart, InfoPicto } from '@/assets/svg/SvgIndex'
 import RankingIcon from './components/RankingIcon'

apps/boilerplate-front-end/src/components/hits/components/injected-hits/InjectedHits.jsx

@@ -11,7 +11,7 @@ import {
   useInstantSearch,
   useQueryRules,
   useSearchBox,
-} from 'react-instantsearch-hooks-web'
+} from 'react-instantsearch'
 
 // Components
 import CustomSkeleton from '@/components/skeletons/CustomSkeleton'

apps/boilerplate-front-end/src/components/landingPage/LandingPageHeader.jsx

@@ -3,7 +3,7 @@
 // The queryRuleCustomData widget displays custom data from Rules.
 // You use this widget to display banners or recommendations returned by Rules, and that match search parameters.
 // You can find the expected rule response by looking at Landing Pages in the Readme
-import { useQueryRules } from 'react-instantsearch-hooks-web'
+import { useQueryRules } from 'react-instantsearch'
 
 // SCSS import
 import './SCSS/landing-page-header.scss'

apps/boilerplate-front-end/src/components/noResults/noResults.jsx

@@ -1,5 +1,5 @@
 // import IS hook
-import { Configure, Index, useSearchBox } from 'react-instantsearch-hooks-web'
+import { Configure, Index, useSearchBox } from 'react-instantsearch'
 
 // Import recoil function
 import { useRecoilValue } from 'recoil'

apps/boilerplate-front-end/src/components/recommend/fbtItems/FbtProducts.jsx

@@ -4,7 +4,7 @@
 import { hitsConfig } from '@/config/hitsConfig'
 
 //  Import highlight widget from InstantSearch library
-import { Highlight } from 'react-instantsearch-hooks-web'
+import { Highlight } from 'react-instantsearch'
 
 // Import heart svg
 import { CartPicto, Heart, PlusPicto } from '@/assets/svg/SvgIndex'

apps/boilerplate-front-end/src/components/recommend/relatedItems/RelatedProducts.jsx

@@ -4,7 +4,7 @@
 import { hitsConfig } from '@/config/hitsConfig'
 
 //  Import highlight widget from InstantSearch library
-import { Highlight } from 'react-instantsearch-hooks-web'
+import { Highlight } from 'react-instantsearch'
 
 // Import heart svg
 import { CartPicto, Heart } from '@/assets/svg/SvgIndex'

apps/boilerplate-front-end/src/components/recommend/trending/TrendingFacetValues.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 
 import { useTrendingFacets } from '@algolia/recommend-react'
-import { useRefinementList } from 'react-instantsearch-hooks-web'
+import { useRefinementList } from 'react-instantsearch'
 
 import { useRecoilState, useRecoilValue } from 'recoil'
 

apps/boilerplate-front-end/src/components/redirects/Redirect.jsx

@@ -1,7 +1,7 @@
 import { memo, useEffect, useState } from 'react'
 
 //Algolia's import
-import { useQueryRules } from 'react-instantsearch-hooks-web'
+import { useQueryRules } from 'react-instantsearch'
 
 // Import Recoil
 import { useRecoilState } from 'recoil'

apps/boilerplate-front-end/src/components/searchbox/SearchBox.jsx

@@ -34,7 +34,7 @@ import useStoreQueryToLocalStorage from '@/hooks/useStoreStringToLocalStorage'
 //Import scope SCSS
 import './SCSS/searchbox.scss'
 
-import { useSearchBox } from 'react-instantsearch-hooks-web'
+import { useSearchBox } from 'react-instantsearch'
 
 import { useSearchParams } from 'react-router-dom'
 

apps/boilerplate-front-end/src/components/searchbox/components/SearchInCategory.jsx

@@ -14,7 +14,7 @@ import { useRecoilState } from 'recoil'
 import {
   useHierarchicalMenu,
   useRefinementList,
-} from 'react-instantsearch-hooks-web'
+} from 'react-instantsearch'
 
 // React router
 import { useSearchParams } from 'react-router-dom'

apps/boilerplate-front-end/src/components/sortBy/SortBy.jsx

@@ -1,5 +1,5 @@
 // This is for displaying the SortBy widget, eg Price asc/desc
-import { useSortBy } from 'react-instantsearch-hooks-web'
+import { useSortBy } from 'react-instantsearch'
 import './sortby.scss'
 
 function CustomSortBy(props) {

apps/boilerplate-front-end/src/components/stats/Stats.jsx

@@ -1,6 +1,6 @@
 // This is for building the stats info that is displayed above the items in the search results page
 import connectStats from 'instantsearch.js/es/connectors/stats/connectStats'
-import { useConnector } from 'react-instantsearch-hooks-web'
+import { useConnector } from 'react-instantsearch'
 
 //Use Translation
 import { useTranslation } from 'react-i18next'

apps/boilerplate-front-end/src/components/voicesearch/VoiceSearch.jsx

@@ -5,7 +5,7 @@ import { createSearchParams, useLocation, useNavigate } from 'react-router-dom'
 import { useSetRecoilState } from 'recoil'
 
 import connectVoiceSearch from 'instantsearch.js/es/connectors/voice-search/connectVoiceSearch'
-import { useConnector, useSearchBox } from 'react-instantsearch-hooks-web'
+import { useConnector, useSearchBox } from 'react-instantsearch'
 
 // Import searchbox Config
 import { searchBoxIsActive } from '@/config/searchboxConfig'

apps/boilerplate-front-end/src/config/algoliaInsightEvents.js

@@ -4,10 +4,10 @@ import { personaObjectSelectedAtom } from './personaConfig'
 import aa from 'search-insights'
 import { createInsightsMiddleware } from 'instantsearch.js/es/middlewares'
 import { useLayoutEffect } from 'react'
-import { useInstantSearch } from 'react-instantsearch-hooks-web'
+import { useInstantSearch } from 'react-instantsearch'
 
 export function InsightsMiddleware() {
-  const { use } = useInstantSearch()
+  const { addMiddlewares } = useInstantSearch()
   const persona = useRecoilValue(personaObjectSelectedAtom)
 
   useLayoutEffect(() => {
@@ -22,8 +22,8 @@ export function InsightsMiddleware() {
     // and attaches the `userToken` to search calls onwards.
     aa('setUserToken', userToken)
 
-    return use(middleware)
-  }, [use])
+    return addMiddlewares(middleware)
+  }, [addMiddlewares])
 
   return null
 }