CINXE.COM

<!DOCTYPE html> <html lang='en'> <head> <title>Configure | React InstantSearch | Algolia</title> <meta content='A widget to forward search parameters to Algolia.' name='description'> <meta content='width=device-width, initial-scale=1.0' name='viewport'> <meta content='ie=edge' http-equiv='X-UA-Compatible'> <meta charset='utf-8'> <link crossorigin href='https://B1G2GM9NG0-dsn.algolia.net' rel='preconnect'> <link as='style' href='/doc/assets/stylesheets/fonts-b49e8aae.css' rel='preload'> <link href='/doc/assets/stylesheets/fonts-b49e8aae.css' rel='stylesheet'> <link href='/doc/assets/stylesheets/main-aad37cfa.css' rel='stylesheet'> <meta content='summary' name='twitter:card'> <meta content='@algolia' name='twitter:site'> <meta content='Configure | React InstantSearch | Algolia' name='twitter:title'> <meta content='A widget to forward search parameters to Algolia.' name='twitter:description'> <meta content='https://www.algolia.com/doc/api-reference/widgets/configure/react/' property='og:url'> <meta content='website' property='og:type'> <meta content='Configure | React InstantSearch | Algolia' property='og:title'> <meta content='A widget to forward search parameters to Algolia.' property='og:description'> <meta content='Algolia Documentation' property='og:site_name'> <link href='/doc/assets/images/favicon/favicon-50d8e9ee.ico' rel='icon' sizes='any'> <link href='/doc/assets/images/favicon/favicon-0ac64a15.svg' rel='icon' type='image/svg+xml'> <link href='/doc/assets/images/favicon/apple-touch-icon-5bd129f5.png' rel='apple-touch-icon'> <link href='/doc/assets/images/favicon/site.webmanifest' rel='manifest'> <link href='https://www.algolia.com/doc/api-reference/widgets/configure/react/' rel='canonical'> <meta name='<Configure>' property='algolia:crawler' type='widget' variation='react'> <script src='https://cdn.cookielaw.org/consent/5e9f5149-bde8-4a13-b973-b7a9385e8ebb/OtAutoBlock.js' type='text/javascript'></script> <script charSet='UTF-8' data-domain-script='5e9f5149-bde8-4a13-b973-b7a9385e8ebb' src='https://cdn.cookielaw.org/scripttemplates/otSDKStub.js' type='text/javascript'></script> <script type='text/javascript'> function OptanonWrapper() { } </script> </head> <body class='relative bg-x-gradient-grey-200-grey-200-50-white-50' data-controller='app'> <div class='flex flex-col min-h-screen text-base font-sans'> <header class='header fixed top-0 lg:z-40 z-20 bg-white w-full font-sans-alt' data-action='resize@window->header#closeDropdownOnMediumScreens' data-controller='header'> <div class='fixed top-0 z-50 flex w-full pointer-events-none h-72'> <div class='header-border absolute right-0 w-half h-full'></div> </div> <div class='flex max-w-1440 mx-auto'> <div class='header-logo flex-shrink-0 w-376 py-24 px-40 lg:block hidden' data-header-logo=''> <a class='block h-24 max-w-200 -mt-8 mb-8' href='/doc/'> <svg fill="none" height="50" width="128" xmlns="http://www.w3.org/2000/svg"><g fill="#003dff"><path clip-rule="evenodd" d="M61.897 16.847V1.27c0-.21-.187-.37-.394-.337l-2.918.46a.342.342 0 0 0-.289.337l.01 15.8c0 .747 0 5.36 5.55 5.521a.342.342 0 0 0 .352-.341V20.35a.338.338 0 0 0-.296-.337c-2.015-.232-2.015-2.751-2.015-3.165z" fill-rule="evenodd"/><path d="M110.02 6.984h-2.936a.342.342 0 0 0-.342.342v15.387c0 .189.153.342.342.342h2.936a.34.34 0 0 0 .341-.341V7.325a.34.34 0 0 0-.341-.342z"/><g clip-rule="evenodd" fill-rule="evenodd"><path d="M107.084 5.055h2.936a.341.341 0 0 0 .341-.341V1.269c0-.21-.188-.37-.395-.337l-2.936.46a.34.34 0 0 0-.288.337v2.985c0 .188.153.341.341.341zM102.009 16.847V1.27c0-.21-.187-.37-.394-.337l-2.918.46a.342.342 0 0 0-.289.337l.01 15.8c0 .747 0 5.36 5.55 5.521a.342.342 0 0 0 .352-.341V20.35a.338.338 0 0 0-.296-.337c-2.015-.232-2.015-2.751-2.015-3.165zM94.371 9.18a6.555 6.555 0 0 0-2.358-1.636c-.92-.378-1.923-.57-3.01-.57-1.087 0-2.091.183-3.003.57a6.907 6.907 0 0 0-2.357 1.637c-.664.707-1.179 1.554-1.548 2.546-.369.993-.534 2.161-.534 3.375s.184 2.132.552 3.135c.37 1.001.876 1.856 1.53 2.565a6.856 6.856 0 0 0 2.348 1.646c.911.395 2.32.597 3.03.606.708 0 2.127-.221 3.047-.606a6.711 6.711 0 0 0 2.358-1.646c.653-.709 1.16-1.564 1.518-2.565.36-1.003.535-1.921.535-3.135s-.193-2.382-.58-3.375c-.37-.993-.876-1.839-1.529-2.546zm-2.569 9.47c-.663.91-1.594 1.37-2.78 1.37-1.19 0-2.119-.45-2.782-1.37-.664-.91-.995-1.967-.995-3.539 0-1.555.323-2.842.986-3.751.662-.911 1.593-1.36 2.78-1.36 1.188 0 2.118.45 2.78 1.36.664.9 1.005 2.196 1.005 3.751 0 1.572-.331 2.62-.994 3.54zM51.722 6.984h-2.853c-2.796 0-5.257 1.474-6.693 3.707a8.393 8.393 0 0 0-1.33 4.553 8.334 8.334 0 0 0 2.984 6.425c.169.15.35.288.538.412a4.654 4.654 0 0 0 2.787.774l.062-.004c.05-.003.101-.006.152-.011l.059-.007.158-.02.036-.006c1.902-.293 3.56-1.782 4.1-3.632v3.344c0 .189.152.341.341.341h2.916a.341.341 0 0 0 .34-.34V7.325a.341.341 0 0 0-.34-.342zm0 11.966c-.706.588-1.618.808-2.593.874l-.028.003c-.065.004-.13.006-.195.006-2.442 0-4.46-2.076-4.46-4.59 0-.593.114-1.157.314-1.676.649-1.684 2.242-2.876 4.11-2.876h2.852zM123.402 6.984h-2.853c-2.796 0-5.257 1.474-6.693 3.707a8.39 8.39 0 0 0-1.33 4.553 8.332 8.332 0 0 0 2.984 6.425c.169.15.35.288.538.412a4.656 4.656 0 0 0 2.787.774l.062-.004c.051-.003.101-.006.152-.011l.059-.007.158-.02.036-.006c1.902-.293 3.56-1.782 4.1-3.632v3.344c0 .189.153.341.341.341h2.916a.341.341 0 0 0 .341-.34V7.325a.341.341 0 0 0-.341-.342zm0 11.966c-.705.588-1.617.808-2.593.874l-.028.003c-.065.004-.13.006-.195.006-2.442 0-4.459-2.076-4.459-4.59 0-.593.113-1.157.313-1.676.649-1.684 2.242-2.876 4.109-2.876h2.853zM75.988 6.984h-2.853c-2.796 0-5.257 1.474-6.693 3.707a8.367 8.367 0 0 0-1.33 4.553c0 .316.018.645.054.96a8.314 8.314 0 0 0 2.93 5.465c.17.15.35.288.538.413a4.654 4.654 0 0 0 5.36-.145c.942-.67 1.67-1.65 1.993-2.76v2.906h-.006v.64c0 1.263-.33 2.213-1.003 2.855-.671.64-1.795.961-3.368.961-.643 0-1.665-.034-2.695-.139a.343.343 0 0 0-.362.244l-.74 2.493c-.058.2.074.406.28.435 1.244.179 2.459.271 3.16.271 2.828 0 4.925-.622 6.297-1.863 1.242-1.122 1.917-2.827 2.036-5.118V7.327a.341.341 0 0 0-.342-.341h-3.257zm0 3.707s.038 8.046 0 8.29c-.699.565-1.568.786-2.515.85-.01 0-.019.002-.028.003a4.212 4.212 0 0 1-.422 0c-2.337-.122-4.31-2.155-4.31-4.59 0-.593.114-1.158.314-1.676.649-1.684 2.242-2.877 4.109-2.877h2.853z"/></g><path d="M14.447.928C6.552.928.115 7.294.002 15.162c-.116 7.991 6.367 14.613 14.36 14.66 2.468.014 4.845-.59 6.957-1.737a.338.338 0 0 0 .062-.55l-1.352-1.198a.955.955 0 0 0-1.004-.17 11.677 11.677 0 0 1-4.725.928c-6.458-.08-11.676-5.453-11.573-11.91.102-6.376 5.32-11.532 11.72-11.532h11.72v20.834l-6.65-5.909a.49.49 0 0 0-.718.076 5.448 5.448 0 0 1-4.737 2.16c-2.68-.186-4.85-2.343-5.051-5.02a5.458 5.458 0 0 1 5.436-5.872 5.46 5.46 0 0 1 5.43 4.97.971.971 0 0 0 .32.644l1.732 1.535a.338.338 0 0 0 .556-.19 8.21 8.21 0 0 0 .12-2.078c-.279-4.067-3.574-7.34-7.643-7.59-4.665-.288-8.566 3.362-8.69 7.936-.12 4.459 3.532 8.302 7.991 8.4a8.131 8.131 0 0 0 4.982-1.558l8.689 7.703c.372.33.96.066.96-.432V1.475a.548.548 0 0 0-.548-.548h-13.9zM4.12 46.04v-1.32h1.51c.38 0 .717-.057 1.01-.17.3-.12.553-.287.76-.5s.363-.463.47-.75a2.67 2.67 0 0 0 .17-.97 2.65 2.65 0 0 0-.17-.98c-.107-.293-.263-.543-.47-.75s-.46-.363-.76-.47a2.945 2.945 0 0 0-1.01-.16H4.12v-1.32h1.42c.66 0 1.237.097 1.73.29s.903.46 1.23.8c.327.333.57.717.73 1.15.167.427.25.87.25 1.33v.22c0 .44-.083.873-.25 1.3-.16.427-.403.813-.73 1.16s-.737.623-1.23.83-1.07.31-1.73.31zm-1.22 0v-7.39h1.42v7.39zm13.782.15c-.66 0-1.234-.117-1.72-.35a3.668 3.668 0 0 1-1.2-.91 4.196 4.196 0 0 1-.71-1.22 3.852 3.852 0 0 1-.23-1.27v-.22c0-.447.08-.89.24-1.33.16-.447.4-.85.72-1.21.326-.36.73-.647 1.21-.86.48-.22 1.043-.33 1.69-.33.64 0 1.2.11 1.68.33.48.213.88.5 1.2.86.326.36.57.763.73 1.21.16.44.24.883.24 1.33v.22c0 .407-.08.83-.24 1.27-.154.433-.39.84-.71 1.22a3.535 3.535 0 0 1-1.2.91c-.48.233-1.047.35-1.7.35zm0-1.32c.373 0 .706-.067 1-.2.3-.133.553-.317.76-.55.213-.24.373-.51.48-.81.113-.307.17-.63.17-.97 0-.367-.057-.703-.17-1.01a2.213 2.213 0 0 0-.48-.8c-.207-.227-.46-.403-.76-.53s-.634-.19-1-.19c-.374 0-.71.063-1.01.19s-.557.303-.77.53a2.415 2.415 0 0 0-.48.8c-.107.307-.16.643-.16 1.01 0 .34.053.663.16.97.113.3.273.57.48.81.213.233.47.417.77.55s.636.2 1.01.2zm11.012 1.32c-.66 0-1.227-.117-1.7-.35s-.86-.537-1.16-.91c-.293-.373-.51-.78-.65-1.22s-.21-.863-.21-1.27v-.22c0-.453.07-.9.21-1.34.147-.44.37-.84.67-1.2s.68-.647 1.14-.86c.467-.22 1.017-.33 1.65-.33.66 0 1.233.12 1.72.36.493.233.887.567 1.18 1 .293.427.47.927.53 1.5h-1.43a1.72 1.72 0 0 0-.36-.84 1.624 1.624 0 0 0-.69-.52 2.39 2.39 0 0 0-.95-.18c-.36 0-.68.063-.96.19-.28.12-.513.293-.7.52s-.33.493-.43.8c-.093.307-.14.647-.14 1.02 0 .36.047.693.14 1 .1.307.247.577.44.81.193.227.43.403.71.53.287.127.617.19.99.19.547 0 1.007-.133 1.38-.4.38-.273.61-.653.69-1.14h1.43c-.067.52-.243.997-.53 1.43s-.68.78-1.18 1.04-1.097.39-1.79.39zm10.208 0c-.68 0-1.253-.13-1.72-.39s-.823-.623-1.07-1.09c-.24-.473-.36-1.027-.36-1.66V38.7h1.42v4.43c0 .347.067.653.2.92.134.26.327.463.58.61.26.14.577.21.95.21.367 0 .677-.07.93-.21.26-.147.454-.35.58-.61.134-.26.2-.567.2-.92V38.7h1.42v4.35c0 .633-.12 1.187-.36 1.66-.233.467-.583.83-1.05 1.09s-1.04.39-1.72.39zm7.293-.19v-7.3h1.94l1.83 4.36h.18l1.82-4.36h1.97V46h-1.41v-6.23l.18.02-1.97 4.72h-1.45l-1.98-4.72.19-.02V46zm12.04 0v-7.3h1.39V46zm1.19 0v-1.2h3.31V46zm0-3.11v-1.2h3.05v1.2zm0-2.99v-1.2h3.23v1.2zm7.268 6.1v-7.3h2.33l3.07 6.12h.33l-.2.18v-6.3h1.34V46h-2.34l-3.07-6.12h-.34l.2-.18V46zm12.612 0v-6.25h1.42V46zm-2.11-6.05V38.7h5.64v1.25zM84.133 46l2.49-7.3h2.32l2.56 7.3h-1.46l-2.17-6.33.51.22h-1.25l.52-.22-2.1 6.33zm1.74-1.94.45-1.2h2.96l.44 1.2zM95.913 46v-6.25h1.42V46zm-2.11-6.05V38.7h5.64v1.25zm9.293 6.05v-7.3h1.42V46zm9.172.19c-.66 0-1.234-.117-1.72-.35a3.668 3.668 0 0 1-1.2-.91 4.182 4.182 0 0 1-.71-1.22 3.836 3.836 0 0 1-.23-1.27v-.22c0-.447.08-.89.24-1.33.16-.447.4-.85.72-1.21.326-.36.73-.647 1.209-.86.481-.22 1.044-.33 1.691-.33.64 0 1.2.11 1.68.33.48.213.88.5 1.2.86.326.36.57.763.73 1.21.16.44.24.883.24 1.33v.22c0 .407-.08.83-.24 1.27a3.93 3.93 0 0 1-.71 1.22 3.547 3.547 0 0 1-1.2.91c-.48.233-1.047.35-1.7.35zm0-1.32c.373 0 .706-.067 1-.2.3-.133.553-.317.76-.55.213-.24.373-.51.48-.81.113-.307.17-.63.17-.97a2.9 2.9 0 0 0-.17-1.01 2.222 2.222 0 0 0-1.24-1.33c-.3-.127-.634-.19-1-.19-.374 0-.71.063-1.01.19s-.557.303-.77.53a2.405 2.405 0 0 0-.48.8c-.107.307-.16.643-.16 1.01 0 .34.053.663.16.97.113.3.273.57.48.81.213.233.47.417.77.55s.636.2 1.01.2zM119.99 46v-7.3h2.33l3.07 6.12h.33l-.2.18v-6.3h1.34V46h-2.34l-3.07-6.12h-.34l.2-.18V46z"/></g></svg> </a> </div> <nav class='header-nav z-30 flex flex-grow justify-between items-center bg-white px-16 whitespace-no-wrap lg:h-auto h-72 min-w-0' data-header-nav=''> <div class='flex lg:hidden'> <div class='h-24 w-24 mr-24 ml-8 md:ml-40'> <a class='block h-full w-full text-xenon-600 fill-current' href='/doc/'> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 501 501"><path fill="#003DFF" d="M249.997.0299683C113.377.0299683 1.99633 110.19.0263314 246.35-1.97367 384.64 110.217 499.22 248.517 500.02c42.71.25 83.849-10.2 120.379-30.05 3.56-1.93 4.111-6.83 1.081-9.52l-23.391-20.74c-4.75-4.22-11.52-5.41-17.37-2.92-25.5 10.85-53.209 16.39-81.759 16.04-111.75-1.37-202.0407-94.35-200.2607-206.1C48.9563 136.4 139.257 47.18 249.997 47.18h202.829v360.51L337.747 305.44c-3.72-3.31-9.431-2.66-12.431 1.31-18.47 24.46-48.56 39.67-81.98 37.36-46.36-3.2-83.92-40.52-87.4-86.86-4.15-55.28 39.65-101.58 94.07-101.58 49.21 0 89.741 37.88 93.971 86.01.38 4.28 2.309 8.28 5.529 11.13l29.971 26.57c3.4 3.01 8.799 1.17 9.629-3.3 2.16-11.55 2.92-23.6 2.07-35.95-4.83-70.39-61.84-127.01-132.26-131.35-80.73-4.98-148.23 58.18-150.37 137.35-2.09 77.15 61.12 143.66 138.28 145.36 32.21.71 62.07-9.42 86.2-26.97l150.36 133.29c6.45 5.71 16.62 1.14 16.62-7.48V9.48999c0-5.24-4.249-9.48999-9.489-9.48999H250.006l-.009.0299683Z"/></svg> </a> </div> <button class='flex items-center mr-32 text-grey-1000 hover:text-grey-1000 fill-current focus:outline-none focus:shadow-outline' data-action='click->app#toggleSidebar'> <span class='flex items-center h-24 w-24 mr-8 p-2 flex-grow-0 flex-shrink-0'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"><path d="M19,8H1A1,1,0,0,1,1,6H19a1,1,0,0,1,0,2Z"/><path d="M19,2H1A1,1,0,0,1,1,0H19a1,1,0,0,1,0,2Z"/><path d="M19,14H1a1,1,0,0,1,0-2H19a1,1,0,0,1,0,2Z"/></svg> </span> <span class='block flex-grow-0 flex-shrink-0 text-xs uppercase'> Menu </span> </button> </div> <ul class='h-full mx-24 uppercase leading-tight text-sm font-semibold tracking-wide lg:flex hidden'> <li class='flex items-center h-full mx-16'> <span class='header-item hover:text-xenon-600 border-b-2 flex items-center h-full cursor-pointer transition-fast-out' data-action='click->header#openDropdown click->header#toggleTabs click->header#setItemAsClicked click@window->header#closeDropdownOnClickOutside' data-tab='guides' data-target='header.item'> Guides </span> </li> <li class='flex items-center h-full mx-16'> <span class='header-item header-item-active hover:text-xenon-600 border-b-2 flex items-center h-full cursor-pointer transition-fast-out' data-action='click->header#openDropdown click->header#toggleTabs click->header#setItemAsClicked click@window->header#closeDropdownOnClickOutside' data-tab='api-reference' data-target='header.item'> <span class='hidden xl:block'> API Reference </span> <span class='xl:hidden'> API </span> </span> </li> <li class='flex items-center h-full mx-16'> <span class='header-item hover:text-xenon-600 border-b-2 flex items-center h-full cursor-pointer transition-fast-out' data-action='click->header#openDropdown click->header#toggleTabs click->header#setItemAsClicked click@window->header#closeDropdownOnClickOutside' data-tab='integrations' data-target='header.item'> Integrations </span> </li> <li class='items-center h-full mx-16 hidden' data-target='header.unlogged'> <a class='text-xenon-600 py-16 mb-px' data-segment-message='Clicked Sign In' data-segment='dashboard' href='https://dashboard.algolia.com/users/sign_in'> Log in </a> </li> <li class='items-center h-full mx-16 hidden' data-target='header.unlogged'> <a class='inline-block btn-skeuomorphic btn-skeuomorphic-blue sm:py-8 py-16 px-16 mb-px text-center' data-segment-message='Clicked Sign Up' data-segment='dashboard' href='https://dashboard.algolia.com/users/sign_up'> <span class='px-4'>Sign up</span> </a> </li> <li class='items-center h-full mx-16 hidden' data-target='header.logged'> <a class='inline-block btn-skeuomorphic sm:py-8 py-16 px-16 mb-px text-center' data-segment-message='Clicked Dashboard' data-segment='dashboard' href='https://dashboard.algolia.com'> <span class='px-4'>Dashboard</span> </a> </li> </ul> <div class='header-search max-w-448 w-full min-w-0' id='docsearch'></div> </nav> <div class='header-dropdown absolute inset-x-0 z-40 w-full pt-72 shadow-lg-outer font-sans pointer-events-none' data-main-dropdown=''> <div class='pt-32 pb-56 px-56 bg-white pointer-events-auto'> <button class='flex absolute top-0 right-0 items-center right-0 right-0 mt-32 mr-40 text-grey-700-opacity-90 hover:text-grey-700 fill-current transition-fast-out z-60 focus:outline-none focus:shadow-outline' data-action='click->header#closeDropdown'> <span class='flex items-center h-16 w-16 mr-16 flex-grow-0 flex-shrink-0'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M8.41,7l5.3-5.29A1,1,0,1,0,12.29.29L7,5.59,1.71.29A1,1,0,0,0,.29,1.71L5.59,7,.29,12.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L7,8.41l5.29,5.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z"/></svg> </span> <span class='block flex-grow-0 flex-shrink-0 mt-2 font-sans-alt text-base leading-none'> Close </span> </button> <div class='hidden justify-center' data-tab='guides' data-target='header.tab'> <div class='flex-initial max-w-272 w-full mr-80'> <div class='text-3xl font-semibold mb-16 leading-loose'> Guides </div> <p class='text-grey-700 mb-16 leading-normal'> Learn how Algolia works and how you can use it to create search and discovery experiences. </p> </div> <div class='column-2 -mx-16 -mb-24'> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 17"><path d="M14.81,5.71l-7-5.6a.48.48,0,0,0-.62,0l-7,5.6A.49.49,0,0,0,0,6.1v8.8A2.08,2.08,0,0,0,2.06,17H12.94A2.08,2.08,0,0,0,15,14.9V6.1A.49.49,0,0,0,14.81,5.71ZM9.33,16H5.67V9H9.33ZM14,14.9A1.08,1.08,0,0,1,12.94,16H10.33V8.5a.5.5,0,0,0-.5-.5H5.17a.5.5,0,0,0-.5.5V16H2.06A1.08,1.08,0,0,1,1,14.9V6.34l6.5-5.2L14,6.34Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Home </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/getting-started/what-is-algolia/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.2 18.2"><path d="M8.88,7.93,5.61,6.79,6.45.54A.47.47,0,0,0,6.13,0a.46.46,0,0,0-.57.21L.06,9.58l0,.08a.48.48,0,0,0,.29.61l3.27,1.14-.84,6.25a.47.47,0,0,0,.32.51.41.41,0,0,0,.16,0A.47.47,0,0,0,3.64,18L9.13,8.62a.59.59,0,0,0,0-.08A.48.48,0,0,0,8.88,7.93Zm-4.33,3.2a.49.49,0,0,0-.32-.51L1.13,9.54l4.19-7L4.65,7.07A.49.49,0,0,0,5,7.58l3.1,1.08-4.19,7Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Getting started </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/sending-and-managing-data/prepare-your-data/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><path d="M14.72,17H2.28A2.28,2.28,0,0,1,0,14.72V11.17a.5.5,0,0,1,.5-.5.5.5,0,0,1,.5.5v3.55A1.28,1.28,0,0,0,2.28,16H14.72A1.28,1.28,0,0,0,16,14.72V11.17a.5.5,0,0,1,1,0v3.55A2.28,2.28,0,0,1,14.72,17ZM8.5,11.67a.5.5,0,0,1-.5-.5V1.71L4.41,5.3a.5.5,0,1,1-.71-.71L8.15.15h0A.31.31,0,0,1,8.31,0a.48.48,0,0,1,.18,0h0a.58.58,0,0,1,.18,0,.36.36,0,0,1,.15.1h0L13.3,4.59a.5.5,0,1,1-.71.71L9,1.71v9.46A.5.5,0,0,1,8.5,11.67Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Sending and managing data </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/managing-results/relevance-overview/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><path d="M16.5,17H10.28a.5.5,0,0,1-.5-.5V10.28a.5.5,0,0,1,.5-.5H16.5a.5.5,0,0,1,.5.5V16.5A.5.5,0,0,1,16.5,17Zm-5.72-1H16V10.78H10.78ZM6.72,17H.5a.5.5,0,0,1-.5-.5V10.28a.5.5,0,0,1,.5-.5H6.72a.5.5,0,0,1,.5.5V16.5A.5.5,0,0,1,6.72,17ZM1,16H6.22V10.78H1ZM16.5,7.22H10.28a.5.5,0,0,1-.5-.5V.5a.5.5,0,0,1,.5-.5H16.5a.5.5,0,0,1,.5.5V6.72A.5.5,0,0,1,16.5,7.22Zm-5.72-1H16V1H10.78Zm-4.06,1H.5a.5.5,0,0,1-.5-.5V.5A.5.5,0,0,1,.5,0H6.72a.5.5,0,0,1,.5.5V6.72A.5.5,0,0,1,6.72,7.22ZM1,6.22H6.22V1H1Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Managing results </div> </div> </a> <div class='hidden' data-controller='flavor-specific-content' data-flavor='android'> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/building-search-ui/what-is-instantsearch/android/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><path d="M14.72,0H2.28A2.28,2.28,0,0,0,0,2.28V14.72A2.28,2.28,0,0,0,2.28,17H14.72A2.28,2.28,0,0,0,17,14.72V2.28A2.28,2.28,0,0,0,14.72,0ZM2.28,1H14.72A1.28,1.28,0,0,1,16,2.28V5.33H1V2.28A1.28,1.28,0,0,1,2.28,1ZM1,14.72V6.33H5.33V16H2.28A1.28,1.28,0,0,1,1,14.72ZM14.72,16H6.33V6.33H16v8.39A1.28,1.28,0,0,1,14.72,16Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Building Search UI </div> </div> </a> </div> <div class='hidden' data-controller='flavor-specific-content' data-flavor='flutter'> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/building-search-ui/what-is-instantsearch/flutter/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><path d="M14.72,0H2.28A2.28,2.28,0,0,0,0,2.28V14.72A2.28,2.28,0,0,0,2.28,17H14.72A2.28,2.28,0,0,0,17,14.72V2.28A2.28,2.28,0,0,0,14.72,0ZM2.28,1H14.72A1.28,1.28,0,0,1,16,2.28V5.33H1V2.28A1.28,1.28,0,0,1,2.28,1ZM1,14.72V6.33H5.33V16H2.28A1.28,1.28,0,0,1,1,14.72ZM14.72,16H6.33V6.33H16v8.39A1.28,1.28,0,0,1,14.72,16Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Building Search UI </div> </div> </a> </div> <div class='hidden' data-controller='flavor-specific-content' data-flavor='ios'> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/building-search-ui/what-is-instantsearch/ios/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><path d="M14.72,0H2.28A2.28,2.28,0,0,0,0,2.28V14.72A2.28,2.28,0,0,0,2.28,17H14.72A2.28,2.28,0,0,0,17,14.72V2.28A2.28,2.28,0,0,0,14.72,0ZM2.28,1H14.72A1.28,1.28,0,0,1,16,2.28V5.33H1V2.28A1.28,1.28,0,0,1,2.28,1ZM1,14.72V6.33H5.33V16H2.28A1.28,1.28,0,0,1,1,14.72ZM14.72,16H6.33V6.33H16v8.39A1.28,1.28,0,0,1,14.72,16Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Building Search UI </div> </div> </a> </div> <div class='hidden' data-controller='flavor-specific-content' data-flavor='js'> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/building-search-ui/what-is-instantsearch/js/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><path d="M14.72,0H2.28A2.28,2.28,0,0,0,0,2.28V14.72A2.28,2.28,0,0,0,2.28,17H14.72A2.28,2.28,0,0,0,17,14.72V2.28A2.28,2.28,0,0,0,14.72,0ZM2.28,1H14.72A1.28,1.28,0,0,1,16,2.28V5.33H1V2.28A1.28,1.28,0,0,1,2.28,1ZM1,14.72V6.33H5.33V16H2.28A1.28,1.28,0,0,1,1,14.72ZM14.72,16H6.33V6.33H16v8.39A1.28,1.28,0,0,1,14.72,16Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Building Search UI </div> </div> </a> </div> <div class='hidden' data-controller='flavor-specific-content' data-flavor='react'> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/building-search-ui/what-is-instantsearch/react/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><path d="M14.72,0H2.28A2.28,2.28,0,0,0,0,2.28V14.72A2.28,2.28,0,0,0,2.28,17H14.72A2.28,2.28,0,0,0,17,14.72V2.28A2.28,2.28,0,0,0,14.72,0ZM2.28,1H14.72A1.28,1.28,0,0,1,16,2.28V5.33H1V2.28A1.28,1.28,0,0,1,2.28,1ZM1,14.72V6.33H5.33V16H2.28A1.28,1.28,0,0,1,1,14.72ZM14.72,16H6.33V6.33H16v8.39A1.28,1.28,0,0,1,14.72,16Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Building Search UI </div> </div> </a> </div> <div class='hidden' data-controller='flavor-specific-content' data-flavor='vue'> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/building-search-ui/what-is-instantsearch/vue/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><path d="M14.72,0H2.28A2.28,2.28,0,0,0,0,2.28V14.72A2.28,2.28,0,0,0,2.28,17H14.72A2.28,2.28,0,0,0,17,14.72V2.28A2.28,2.28,0,0,0,14.72,0ZM2.28,1H14.72A1.28,1.28,0,0,1,16,2.28V5.33H1V2.28A1.28,1.28,0,0,1,2.28,1ZM1,14.72V6.33H5.33V16H2.28A1.28,1.28,0,0,1,1,14.72ZM14.72,16H6.33V6.33H16v8.39A1.28,1.28,0,0,1,14.72,16Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Building Search UI </div> </div> </a> </div> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/sending-events/getting-started/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Sending events </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/search-analytics/overview/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Search analytics </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/personalization/advanced-personalization/what-is-advanced-personalization/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Personalization </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/ab-testing/what-is-ab-testing/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> A/B testing </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/algolia-recommend/overview/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cpu"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Algolia Recommend </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/algolia-ai/dynamic-synonym-suggestions/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-target"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="6"></circle><circle cx="12" cy="12" r="2"></circle></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Algolia AI </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/going-to-production/implementation-checklist/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><path d="M8.5,0A8.5,8.5,0,1,0,17,8.5,8.51,8.51,0,0,0,8.5,0ZM16,8H12.18A12.73,12.73,0,0,0,9.64,1.1,7.49,7.49,0,0,1,16,8ZM5.82,9h5.36A11.77,11.77,0,0,1,8.5,15.74,11.73,11.73,0,0,1,5.82,9Zm0-1A11.77,11.77,0,0,1,8.5,1.26,11.73,11.73,0,0,1,11.18,8ZM7.36,1.1A12.7,12.7,0,0,0,4.82,8H1A7.49,7.49,0,0,1,7.36,1.1ZM1,9H4.82a12.73,12.73,0,0,0,2.54,6.9A7.49,7.49,0,0,1,1,9Zm8.61,6.9A12.7,12.7,0,0,0,12.18,9H16A7.49,7.49,0,0,1,9.64,15.9Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Going to production </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/scaling/servers-clusters/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><path d="M8.5,17A.54.54,0,0,1,8.28,17l-8-4a.5.5,0,1,1,.44-.9L8.5,15.94l7.78-3.89a.5.5,0,0,1,.44.9l-8,4A.54.54,0,0,1,8.5,17Zm0-4A.54.54,0,0,1,8.28,13l-8-4a.5.5,0,1,1,.44-.9L8.5,11.94l7.78-3.89a.5.5,0,0,1,.44.9l-8,4A.54.54,0,0,1,8.5,13Zm0-4A.54.54,0,0,1,8.28,9l-8-4a.5.5,0,0,1,0-.9l8-4a.49.49,0,0,1,.44,0l8,4a.5.5,0,0,1,0,.9l-8,4A.54.54,0,0,1,8.5,9ZM1.62,4.5,8.5,7.94,15.38,4.5,8.5,1.06Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Scaling </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/security/api-keys/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 17"><path d="M7,17A.54.54,0,0,1,6.78,17C6.5,16.81,0,13.55,0,8.5V2.9a.5.5,0,0,1,.33-.47L6.83,0a.5.5,0,0,1,.34,0l6.5,2.4A.5.5,0,0,1,14,2.9V8.5c0,5.05-6.5,8.31-6.78,8.45A.54.54,0,0,1,7,17ZM1,3.25V8.5c0,3.95,4.89,6.83,6,7.44,1.11-.61,6-3.49,6-7.44V3.25L7,1Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Security </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/solutions/ecommerce/search/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="w-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 21.08"><path d="M18.73,5.4a.44.44,0,0,0-.07-.19.46.46,0,0,0-.15-.16,2.49,2.49,0,0,0-.76-.72l-7-4a2.53,2.53,0,0,0-2.5,0l-7,4a2.49,2.49,0,0,0-.76.72.46.46,0,0,0-.15.16.44.44,0,0,0-.07.19A2.59,2.59,0,0,0,0,6.5v8a2.5,2.5,0,0,0,1.25,2.16l7,4a2.4,2.4,0,0,0,.93.29.46.46,0,0,0,.64,0,2.4,2.4,0,0,0,.93-.29l7-4A2.5,2.5,0,0,0,19,14.5h0v-8A2.59,2.59,0,0,0,18.73,5.4Zm-10-4.2a1.51,1.51,0,0,1,1.5,0l7,4a1.24,1.24,0,0,1,.18.14L9.5,9.93,1.57,5.34a1.24,1.24,0,0,1,.18-.14Zm-7,14.6A1.52,1.52,0,0,1,1,14.5v-8a1.55,1.55,0,0,1,0-.31L9,10.8v9.1a1.12,1.12,0,0,1-.25-.11ZM18,14.5a1.49,1.49,0,0,1-.75,1.29l-7,4a1.36,1.36,0,0,1-.25.11V10.8l8-4.61a1.55,1.55,0,0,1,0,.31Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Solutions </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/billing/marketplaces/amazon-web-services/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" class="h-full" viewBox="0 0 24 24"><path d="M4 10h12M4 14h9m6-8a7.7 7.7 0 0 0-5.2-2A7.9 7.9 0 0 0 6 12c0 4.4 3.5 8 7.8 8 2 0 3.8-.8 5.2-2"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Billing </div> </div> </a> </div> </div> <div class='hidden justify-center' data-tab='api-reference' data-target='header.tab'> <div class='flex -mx-32 lg:flex-row flex-col'> <div class='mx-32'> <div class='text-xl font-semibold mb-24'> API clients </div> <div class='column-2 -mx-16 -mb-24'> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/libraries/csharp/v7/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" fill="#5c2d91" viewBox="0 0 64.89 64.89"><circle cx="32.89" cy="32" r="32"/><path d="M9.82,9A32,32,0,0,0,52.4,56.78a33.57,33.57,0,0,0,2.6-2.6Z" transform="translate(0.89)" fill="#ffffff" opacity="0.1"/><path d="M7.4,41.25a1.34,1.34,0,0,1-1-.42,1.37,1.37,0,0,1-.41-1,1.41,1.41,0,0,1,.41-1,1.38,1.38,0,0,1,2,0,1.42,1.42,0,0,1-1,2.42Z" transform="translate(0.89)" fill="#ffffff"/><path d="M27.27,41H24.65L15.28,26.46a6.11,6.11,0,0,1-.58-1.14h-.08a19,19,0,0,1,.1,2.5V41H12.59V22.77h2.77l9.12,14.28c.38.59.63,1,.74,1.22h.05a18.44,18.44,0,0,1-.13-2.68V22.77h2.13Z" transform="translate(0.89)" fill="#ffffff"/><path d="M41.69,41H32V22.77h9.24V24.7H34.18v6.06h6.58v1.92H34.18V39H41.7Z" transform="translate(0.89)" fill="#ffffff"/><path d="M56,24.7H50.7V41H48.57V24.7H43.33V22.77H56Z" transform="translate(0.89)" fill="#ffffff"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> C# </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/libraries/dart/v1/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 137 137"><path fill="#01579B" d="M27.74 108.28 4.47 85.01C1.71 82.18 0 78.18 0 74.27c0-1.81 1.02-4.64 1.79-6.26l21.48-44.74 4.47 85.01Z"/><path fill="#40C4FF" d="M107.39 27.74 84.12 4.47C82.09 2.43 77.86 0 74.28 0c-3.08 0-6.1.62-8.05 1.79L23.28 23.27l84.11 4.47ZM55.48 136.02h56.38v-24.16L69.8 98.43l-38.48 13.43 24.16 24.16Z"/><path fill="#29B6F6" d="M23.27 95.75c0 7.18.9 8.94 4.47 12.53l3.58 3.58h80.54L72.49 67.12 23.27 23.27v72.48Z"/><path fill="#01579B" d="M94.86 23.26H23.27l88.59 88.59h24.16V56.37l-28.64-28.64c-4.02-4.03-7.59-4.47-12.52-4.47Z"/><path fill="#fff" d="M28.64 109.17c-3.58-3.59-4.47-7.13-4.47-13.42V24.16l-.89-.89v72.48c-.01 6.29-.01 8.03 5.36 13.42Z" opacity=".2"/><path fill="#263238" d="M135.13 55.48v55.48h-24.16l.89.9h24.16V56.37l-.89-.89Z" opacity=".2"/><path fill="#fff" d="M107.39 27.74c-4.44-4.44-8.07-4.47-13.42-4.47H23.28l.89.89h69.8c2.67 0 9.41-.45 13.42 3.58Z" opacity=".2"/><path fill="url(#a)" d="m135.13 55.48-27.74-27.74L84.12 4.47C82.09 2.43 77.86 0 74.28 0c-3.08 0-6.1.62-8.05 1.79L23.28 23.27 1.8 68.01C1.03 69.64.01 72.47.01 74.27c0 3.91 1.72 7.9 4.47 10.74l21.44 21.29c.51.63 1.11 1.27 1.82 1.98l.89.89 2.68 2.68 23.27 23.27.89.89h56.37v-24.16H136V56.37l-.87-.89Z" opacity=".2"/><defs><radialGradient id="a" cx="0" cy="0" r="1" gradientTransform="matrix(68 0 0 68 68.005 68.007)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity=".1"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Dart </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/libraries/go/v4/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" fill="#00add8" viewBox="0 0 29 10.83"><path d="M13.14,17.34h-5a.22.22,0,0,0-.16.07l-.29.38c0,.05,0,.07,0,.07l5.11,0a.2.2,0,0,0,.14-.09l.24-.36C13.21,17.38,13.2,17.34,13.14,17.34Z" transform="translate(-5.5 -14.58)"/><path d="M12.4,18.64H6a.22.22,0,0,0-.16.07l-.3.38s0,.07,0,.07h6.68a.12.12,0,0,0,.12-.09l.12-.34S12.46,18.64,12.4,18.64Z" transform="translate(-5.5 -14.58)"/><path d="M12.09,19.94H9.27a.18.18,0,0,0-.14.08l-.2.36a0,0,0,0,0,0,.08l3.08,0a.12.12,0,0,0,.1-.1l0-.34C12.18,20,12.15,19.94,12.09,19.94Z" transform="translate(-5.5 -14.58)"/><path d="M34.45,18.7a4.4,4.4,0,0,0-2-3.15,5.17,5.17,0,0,0-4-.72,5.87,5.87,0,0,0-3.95,2.36,6,6,0,0,0-1,1.83H19a.39.39,0,0,0-.36.23c-.19.36-.53,1.1-.72,1.54-.1.24,0,.42.27.42h2.73c-.14.2-.26.37-.38.52a2.62,2.62,0,0,1-2.41.93,2.2,2.2,0,0,1-1.9-2.21,3,3,0,0,1,1.44-2.69,2.44,2.44,0,0,1,2.55-.21,1.86,1.86,0,0,1,.67.54c.18.21.2.2.41.14l2.37-.62c.17,0,.23-.11.14-.24a4.37,4.37,0,0,0-1.64-2,4.84,4.84,0,0,0-3.74-.69,6.24,6.24,0,0,0-4,2.44,5.52,5.52,0,0,0-1.2,4.14A4.42,4.42,0,0,0,15,24.4a5,5,0,0,0,3.8.93,5.84,5.84,0,0,0,4-2.4,5.94,5.94,0,0,0,.6-1,4.35,4.35,0,0,0,1.41,2.2,5.3,5.3,0,0,0,3.44,1.25c.37-.05.75-.06,1.13-.13a6.43,6.43,0,0,0,3.39-1.81A5.45,5.45,0,0,0,34.45,18.7Zm-4.58,3.71a2.59,2.59,0,0,1-2.3.08,2.32,2.32,0,0,1-1.3-2.66,3.09,3.09,0,0,1,2.47-2.46,2.32,2.32,0,0,1,2.88,1.88,3,3,0,0,1,0,.46A3.08,3.08,0,0,1,29.87,22.41Z" transform="translate(-5.5 -14.58)"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Go </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/libraries/java/v4/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" fill="#ea2d2e" viewBox="0 0 18.38 24.65"><path d="M20,21.2c-.92-2.06-4-3.86,0-7,5-3.94,2.45-6.5,2.45-6.5h0c1.05,4.07-3.68,5.3-5.39,7.83C15.94,17.24,17.67,19.09,20,21.2Z" transform="translate(-10.81 -7.68)"/><path d="M25.61,12.71s-8.53,2.11-4.45,6.75h0a1.79,1.79,0,0,1-.32,2.6s3.05-1.56,1.65-3.51S20.18,15.83,25.61,12.71Z" transform="translate(-10.81 -7.68)"/><path d="M24.19,22.74a8.26,8.26,0,0,1,1.14-.6s-1.88.33-3.75.49a33.81,33.81,0,0,1-6,.06c-2.92-.38,1.61-1.45,1.61-1.45h0a8.74,8.74,0,0,0-3.92.92C10.71,23.38,19.59,23.94,24.19,22.74Z" transform="translate(-10.81 -7.68)"/><path d="M25.31,25.73h0a.44.44,0,0,1-.09.13c6.24-1.63,3.94-5.73,1-4.69a.85.85,0,0,0-.4.31,3.56,3.56,0,0,1,.54-.15C27.82,21,30,23.33,25.31,25.73Z" transform="translate(-10.81 -7.68)"/><path d="M27.61,28.73h0s.7.58-.78,1c-2.81.85-11.71,1.1-14.19,0-.89-.39.78-.92,1.31-1a3.36,3.36,0,0,1,.85-.1c-1-.68-6.39,1.36-2.74,1.94C22,32.2,30.19,29.88,27.61,28.73Z" transform="translate(-10.81 -7.68)"/><path d="M25.48,31.42a37.24,37.24,0,0,1-11.35.17s.57.47,3.52.66h0c4.48.28,11.37-.16,11.54-2.26C29.19,30,28.87,30.78,25.48,31.42Z" transform="translate(-10.81 -7.68)"/><path d="M23.36,24.67A20.5,20.5,0,0,1,16.7,25c-1.63-.17-.57-.95-.57-.95-4.21,1.38,2.35,3,8.25,1.25A2.87,2.87,0,0,1,23.36,24.67Z" transform="translate(-10.81 -7.68)"/><polygon points="5.32 16.36 5.32 16.36 5.32 16.36 5.32 16.36"/><path d="M16.73,26.74h0C12.9,27.8,19.06,30,23.94,27.92a8.76,8.76,0,0,1-1.37-.67,14.43,14.43,0,0,1-5.16.22C15.78,27.28,16.73,26.74,16.73,26.74Z" transform="translate(-10.81 -7.68)"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Java </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/libraries/javascript/v5/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" fill="#f7df1e" viewBox="0 0 20 20"><path d="M17.5,0H2.5A2.5,2.5,0,0,0,0,2.5v15A2.5,2.5,0,0,0,2.5,20h15A2.5,2.5,0,0,0,20,17.5V2.5A2.5,2.5,0,0,0,17.5,0ZM10.57,14.41a1.52,1.52,0,0,1-1,.78A2.34,2.34,0,0,1,7.81,15a2,2,0,0,1-.73-.83l1-.61.07.11a1.13,1.13,0,0,0,.45.47c.22.07.69.12.87-.26a5.31,5.31,0,0,0,.07-1.49V9.2h1.23v3.4A3.61,3.61,0,0,1,10.57,14.41Zm4.91-.27c-.43,1.47-2.82,1.52-3.78.55a2.29,2.29,0,0,1-.45-.62l1-.57a1.42,1.42,0,0,0,1,.73c.6.07,1.21-.14,1.08-.78s-1.24-.65-2-1.22A1.73,1.73,0,0,1,12,9.81l0,0a1.78,1.78,0,0,1,.94-.55h.39a1.85,1.85,0,0,1,1.56.56,2.61,2.61,0,0,1,.31.43l-1,.62a1,1,0,0,0-.54-.5.65.65,0,0,0-.84.35h0a.65.65,0,0,0,0,.39c.13.3.58.44,1,.62,1.16.48,1.55,1,1.65,1.58h0A1.92,1.92,0,0,1,15.48,14.14Z"/><path fill="#000000" d="M15.47,13.28c-.1-.58-.49-1.1-1.65-1.58-.42-.18-.87-.32-1-.62a.65.65,0,0,1,0-.39h0a.65.65,0,0,1,.84-.35,1,1,0,0,1,.54.5l1-.62a2.61,2.61,0,0,0-.31-.43,1.85,1.85,0,0,0-1.56-.56h-.39a1.78,1.78,0,0,0-.94.55l0,0a1.73,1.73,0,0,0,.36,2.42c.76.57,1.87.58,2,1.22s-.48.85-1.08.78a1.42,1.42,0,0,1-1-.73l-1,.57a2.29,2.29,0,0,0,.45.62c1,1,3.35.92,3.78-.55A1.92,1.92,0,0,0,15.47,13.28Z"/><path fill="#000000" d="M10.77,9.2H9.54v3.19a5.31,5.31,0,0,1-.07,1.49c-.18.38-.65.33-.87.26a1.13,1.13,0,0,1-.45-.47l-.07-.11-1,.61a2,2,0,0,0,.73.83,2.34,2.34,0,0,0,1.76.19,1.52,1.52,0,0,0,1-.78,3.61,3.61,0,0,0,.2-1.81Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> JavaScript </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/libraries/kotlin/v3/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" fill="#806ee3" viewBox="0 0 60 60"><polygon points="0 60 30.1 29.9 60 60 0 60" fill="#806ee3"/><polygon points="0 0 30.1 0 0 31.7 0 0" fill="#0095d5"/><polygon points="30.1 0 0 31.7 0 60 30.1 29.9 60 0 30.1 0" fill="#ee7e2f"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Kotlin </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/libraries/php/v4/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" fill="#8892be" viewBox="0 0 26 12"><path d="M30.11,16.36H25.66L23.73,26H26l.48-2.5h2.17A4.24,4.24,0,0,0,33,19.1C33,17.43,32,16.48,30.11,16.36Zm-1.68,5.36H27l.6-3.57h1.57c.84,0,1.44.35,1.44,1.07C30.47,21.24,29.51,21.6,28.43,21.72Z" transform="translate(-7 -14)"/><path d="M13.38,16.36H8.93L7,26H9.29l.48-2.5h2.17a4.24,4.24,0,0,0,4.33-4.4C16.27,17.43,15.31,16.48,13.38,16.36ZM11.7,21.72H10.25l.6-3.57h1.57c.84,0,1.44.35,1.44,1.07C13.74,21.24,12.78,21.6,11.7,21.72Z" transform="translate(-7 -14)"/><path d="M21.86,16.5H19.69l.49-2.5H17.89L16,23.64h2.29l1.08-5.36h1.81c.84,0,.84.36.72,1L21,23.64h2.41l.84-4.88C24.51,17.57,23.79,16.62,21.86,16.5Z" transform="translate(-7 -14)"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> PHP </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/libraries/python/v4/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" fill="#4584b6" viewBox="0 0 19.52 19.73"><path d="M17.4,19.7h4.71a2.54,2.54,0,0,0,2.64-2.59V12.76s.4-2.63-4.79-2.63h0c-5,0-4.66,2.19-4.66,2.19v2.26h4.74v.68H13.42s-3.18-.37-3.18,4.71S13,24.87,13,24.87h1.65V22.51A2.66,2.66,0,0,1,17.4,19.7Zm-.06-6.32a.85.85,0,0,1-.85-.86.86.86,0,1,1,.85.86Z" transform="translate(-10.24 -10.13)"/><path d="M27,15.13H25.33v2.36A2.66,2.66,0,0,1,22.6,20.3H17.89a2.54,2.54,0,0,0-2.64,2.59v4.35s-.4,2.63,4.79,2.63c5,0,4.66-2.19,4.66-2.19V25.42H20v-.68h6.63s3.18.37,3.18-4.71S27,15.13,27,15.13ZM22.87,26.42a.86.86,0,0,1,0,1.72h0a.87.87,0,0,1,0-1.73Z" transform="translate(-10.24 -10.13)"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Python </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/libraries/ruby/v3/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" fill="#cc342d" viewBox="0 0 21.81 16.28"><polygon points="5.08 0 5.08 4.22 10.08 0 5.08 0"/><polygon points="17.33 0.39 17.33 4.55 21.78 4.55 17.33 0.39"/><polygon points="16.19 4.55 10.92 0.08 5.64 4.55 16.19 4.55"/><polygon points="16.72 0 11.75 0 16.72 4.19 16.72 0"/><polygon points="4.47 0.42 0.06 4.55 4.47 4.55 4.47 0.42"/><polygon points="17.22 5.16 12.08 15.28 21.8 5.16 17.22 5.16"/><polygon points="5.28 5.16 10.92 16.28 16.56 5.16 5.28 5.16"/><polygon points="0 5.16 9.72 15.28 4.61 5.16 0 5.16"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Ruby </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/libraries/scala/v2/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" fill="#de3423" viewBox="0 0 13.92 23.79"><path d="M13,17.25v-5.5c13.9,1.37,13.9,3.67,13.9,3.67v5.5C26.94,18.62,13,17.25,13,17.25Zm0,7.33v-5.5c13.9,1.38,13.9,3.67,13.9,3.67v5.5C26.94,26,13,24.58,13,24.58Z" transform="translate(-13.04 -8.1)" fill-opacity="0.4"/><path d="M27,8.1v5.5s0,2.3-13.9,3.67V11.75S27,10.4,27,8.1ZM13,19.08s13.9-1.37,13.9-3.66v5.5s0,2.29-13.9,3.66ZM13,31.9V26.4s13.9-1.38,13.9-3.67v5.5S27,30.52,13,31.9Z" transform="translate(-13.04 -8.1)"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Scala </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/libraries/swift/v9/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" fill="#f05138" viewBox="0 0 20 18"><path d="M22.31,11c8.5,5.6,5.9,12.65,5.9,12.65A8.28,8.28,0,0,1,29.59,26,7.29,7.29,0,0,1,30,29c-.09,0-1.16-1.83-3-1.83S24.09,29,20.76,29A12.53,12.53,0,0,1,10,22.73s3.3,2.41,6.76,2.32S21.17,24,21.17,24s-1.54-1.32-4.2-4a50.78,50.78,0,0,1-5.17-6.31s4,3.25,5.3,4.2,2.57,1.81,2.57,1.81-1.24-1.37-2.12-2.47-3.13-4.43-3.13-4.43,3.45,3.17,5,4.43S24,20.59,24,20.59s1.81-4.2-1.69-9.59Z" transform="translate(-10 -11)"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Swift </div> </div> </a> </div> </div> <div class='flex flex-col'> <div class='mx-32'> <div class='text-xl font-semibold mb-24'> UI libraries </div> <div class='column-2 -mx-16'> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/api-reference/widgets/js/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#f7df1e'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> InstantSearch.js </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/api-reference/widgets/react/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#00d8ff'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> React InstantSearch </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/api-reference/widgets/vue/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#42b883'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Vue InstantSearch </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/api-reference/widgets/ios/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#f05138'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> InstantSearch iOS </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/api-reference/widgets/android/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#a4c639'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> InstantSearch Android </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/guides/building-search-ui/widgets/showcase/flutter/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#027dfd'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Algolia for Flutter </div> </div> </a> </div> <div class='-mx-16 -mb-24'> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/ui-libraries/autocomplete/introduction/what-is-autocomplete/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current text-grey-600'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.7 16.7"><defs/><path fill="#ad6af8" d="M12.8 12.9c-1.3 1-2.8 1.5-4.4 1.5-1.7 0-3.3-.6-4.5-1.6-.2-.2-.4.1-.3.3 1.3 1.3 3 2 4.8 2 1.7 0 3.4-.7 4.7-1.9.1-.2-.1-.5-.3-.3z"/><path fill="#4a5cff" d="M8.3 0C3.7 0 0 3.7 0 8.3s3.7 8.3 8.3 8.3c4.6 0 8.3-3.7 8.3-8.3S13 0 8.3 0zm0 15.8C4.2 15.8.8 12.4.8 8.3S4.2.8 8.3.8s7.5 3.4 7.5 7.5c0 4.2-3.3 7.5-7.5 7.5z"/><path fill="#8dd9fb" d="M8.3 1.6c-3.7 0-6.7 3-6.7 6.7 0 1.5.5 2.9 1.3 4l.2.2h.1c.5.1 1 .1 1.4.1 4.7 0 8.6-3.5 9.1-8v-.2c-1.1-1.6-3.1-2.8-5.4-2.8zM3.7 7.5c-.1.5-.4.9-.7.8-.3-.1-.5-.5-.4-1 .1-.5.4-.8.7-.8.4.1.5.5.4 1zm3-.1C5.8 7.4 5 6.7 5 5.8s.7-1.7 1.7-1.7 1.7.7 1.7 1.7-.8 1.6-1.7 1.6zm2.6.5c-.4 0-.9-.4-.9-.9s.4-.9.9-.9.9.4.9.9-.4.9-.9.9z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Autocomplete </div> </div> </a> </div> </div> </div> <div class='mx-32 flex flex-col justify-between'> <div> <div class='text-xl font-semibold mb-24'> API parameters </div> <div class='-mx-16'> <a class='flex items-center text-grey-700 font-sans-alt break-avoid-column mx-16 group' href='/doc/api-reference/api-parameters/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current text-grey-600'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13.38,10.18a1.21,1.21,0,0,0,.24,1.33l0,0a1.45,1.45,0,1,1-2.05,2.06h0l0,0a1.21,1.21,0,0,0-1.32-.24,1.2,1.2,0,0,0-.73,1.1v.13a1.46,1.46,0,0,1-2.91,0h0v-.07a1.2,1.2,0,0,0-.78-1.1,1.21,1.21,0,0,0-1.33.24l0,.05a1.47,1.47,0,0,1-2.06,0,1.45,1.45,0,0,1,0-2.06l0,0a1.21,1.21,0,0,0,.24-1.32,1.2,1.2,0,0,0-1.1-.73H1.45a1.46,1.46,0,0,1,0-2.91h.07a1.2,1.2,0,0,0,1.1-.78A1.2,1.2,0,0,0,2.38,4.5l0,0a1.47,1.47,0,0,1,0-2.06,1.45,1.45,0,0,1,2.06,0l.05,0a1.21,1.21,0,0,0,1.32.24h.06a1.22,1.22,0,0,0,.73-1.1V1.46a1.45,1.45,0,1,1,2.9,0v.06a1.22,1.22,0,0,0,2.06.86l0,0a1.45,1.45,0,1,1,2.06,2.05l0,.05a1.21,1.21,0,0,0-.24,1.32v.06a1.22,1.22,0,0,0,1.1.73h.13A1.44,1.44,0,0,1,16,8a1.47,1.47,0,0,1-1.45,1.46h-.07A1.19,1.19,0,0,0,13.38,10.18ZM8,10.18A2.18,2.18,0,0,0,8,5.82H8a2.18,2.18,0,0,0,0,4.36Z" transform="translate(0 0)"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Index settings and search parameters </div> </div> </a> </div> </div> <div> <div class='text-xl font-semibold mb-24'> REST API </div> <div class='-mx-16'> <a class='flex items-center text-grey-700 font-sans-alt break-avoid-column mx-16 group' href='/doc/api-reference/rest-api/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current text-xenon-600'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196 196"><path d="M97.9316.0117395C44.4132.0117395.782026 43.1649.0103148 96.5031-.773148 150.676 43.1753 195.56 97.3518 195.874c16.7312.098 32.8462-3.996 47.1562-11.772 1.395-.756 1.61-2.675.424-3.729l-9.163-8.125c-1.861-1.653-4.513-2.119-6.805-1.144-9.989 4.251-20.844 6.421-32.0275 6.284-43.776-.537-79.1455-36.96-78.4482-80.736.6894-43.2198 36.0629-78.1701 79.4433-78.1701h79.4544V159.705l-45.08-40.054c-1.457-1.297-3.694-1.043-4.869.513-7.236 9.581-19.023 15.54-32.1144 14.635-18.1607-1.254-32.8741-15.873-34.2373-34.026-1.6257-21.655 15.532-39.7921 36.8501-39.7921 19.2766 0 35.1536 14.8387 36.8106 33.6928.149 1.6766.905 3.2435 2.167 4.36l11.74 10.4083c1.332 1.179 3.447.458 3.772-1.293.846-4.524 1.144-9.2446.811-14.0825-1.892-27.574-24.224-49.7538-51.81-51.4539-31.6247-1.9509-58.0667 22.7909-58.905 53.8043-.8187 30.2221 23.9426 56.2761 54.1686 56.9421 12.6174.278 24.3144-3.69 33.7674-10.565l58.901 52.214c2.526 2.237 6.51.446 6.51-2.93V3.71753C195.868 1.66486 194.204 0 192.151 0H97.9354l-.0038.0117395Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> A full reference of API endpoints </div> </div> </a> </div> </div> <div> <div class='text-xl font-semibold mb-24'> Crawler </div> <div class='-mx-16'> <a class='flex items-center text-grey-700 font-sans-alt break-avoid-column mx-16 group' href='/doc/tools/crawler/apis/configuration/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current text-grey-600'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.05 20.63"><rect x="16.95" y="2.95" width="1.47" height="1.47" style="fill:#a6b0f9"/><rect x="14" y="2.95" width="1.47" height="1.47" style="fill:#a6b0f9"/><rect x="11.05" y="2.95" width="1.47" height="1.47" style="fill:#a6b0f9"/><polygon points="0 11.05 25.05 11.05 25.05 9.58 0 9.58 0 11.05" style="fill:#565db6"/><path d="M5.16,9.58H19.89V1.47H5.16Zm-1.48,0V0H21.37V9.58Z" style="fill:#a6b0f9"/><polygon points="19.89 12.53 19.89 19.16 5.16 19.16 5.16 12.53 3.68 12.53 3.68 20.63 21.37 20.63 21.37 12.53 19.89 12.53" style="fill:#a6b0f9;fill-opacity:0.5"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Configuration API </div> </div> </a> </div> </div> </div> </div> </div> <div class='hidden justify-center' data-tab='integrations' data-target='header.tab'> <div class='flex-initial max-w-272 w-full mr-80'> <div class='text-3xl font-semibold mb-16 leading-loose'> Integrations </div> <p class='text-grey-700 mb-16 leading-normal'> Speed up your implementation with Algolia's integrations and tools. </p> </div> <div class='flex -ml-32 flex-col -mb-24'> <div class='mx-32 mb-24'> <div class='text-xl font-semibold mb-24'> Web frameworks </div> <div class='column-2 -mx-16'> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/framework-integration/rails/getting-started/setup/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#cc0000'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.58 18.2"><polygon points="0.2 13.64 0 15.35 1.67 15.55 1.98 13.78 0.2 13.64"/><polygon points="6.14 4.25 4.94 3.47 3.99 4.53 5.22 5.34 6.14 4.25"/><polygon points="3.48 8.57 1.91 7.96 1.4 9.39 3 9.9 3.48 8.57"/><polygon points="17.49 1.87 16.37 1.05 16.33 1.67 17.29 2.18 17.49 1.87"/><polygon points="10.02 8.88 11.18 9.87 11.46 8.74 10.47 8 10.02 8.88"/><polygon points="13.23 0.95 13.09 0.07 11.63 0 11.83 0.99 13.23 0.95"/><polygon points="9.58 1.46 8.76 0.55 7.64 1.12 8.46 2.11 9.58 1.46"/><polygon points="16.16 4.18 17.08 4.29 17.08 3.88 16.16 3.67 16.16 4.18"/><polygon points="13.23 4.12 13.67 4.93 14.32 4.42 14.18 3.88 13.23 4.12"/><path d="M23.19,12c-3.41.3-5.76,2.55-7.23,5.27a24.58,24.58,0,0,0-2.9,7.49,13.54,13.54,0,0,0-.34,4.35h9.07s-2-4.56-1.5-8.74A7.05,7.05,0,0,1,26,14.06a3.48,3.48,0,0,1,2.9,1l.41-.62S26.6,11.68,23.19,12Z" transform="translate(-10.71 -10.9)"/><polygon points="12.55 16.64 11.9 15.31 10.4 15.31 10.74 16.54 12.55 16.64"/><polygon points="9.92 12.28 11.35 12.9 11.29 11.77 9.99 11.09 9.92 12.28"/><polygon points="12.51 6.19 11.83 5.17 11.12 5.82 12.1 6.91 12.51 6.19"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Rails </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/framework-integration/symfony/getting-started/algolia-searchbundle/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#000000'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.8 18.97"><path d="M26.4,10.52a4.93,4.93,0,0,0-3.55,1.92,12.27,12.27,0,0,0-2.17,4,7.7,7.7,0,0,0-2.92-2.06,3.57,3.57,0,0,0-3.25.6,3,3,0,0,0-1,1.47,3.34,3.34,0,0,0,.83,3l.85.92a1.32,1.32,0,0,1,.39,1.33,1.56,1.56,0,0,1-2,.93c-.4-.12-1-.42-.85-.85A5,5,0,0,1,13,21.4a1.06,1.06,0,0,0,.1-.28,1.14,1.14,0,0,0-.63-1.43.94.94,0,0,0-1.29.67c-.25.79.13,2.23,2.14,2.86,2.35.73,4.34-.57,4.62-2.26.18-1.06-.29-1.85-1.16-2.86l-.7-.79a1.32,1.32,0,0,1-.14-1.74,1.51,1.51,0,0,1,1.78-.44c1.27.35,1.83,1.24,2.78,2-.39,1.3-.65,2.6-.88,3.77l-.14.87c-.67,3.59-1.19,5.56-2.53,6.69a2.24,2.24,0,0,1-1.24.51.35.35,0,0,1-.4-.3c0-.22.17-.32.29-.41a.76.76,0,0,0,.43-.79,1.19,1.19,0,0,0-1.26-1.14A1.48,1.48,0,0,0,13.4,27.8c0,1,.95,1.73,2.32,1.68a5.49,5.49,0,0,0,4-2.27,14.28,14.28,0,0,0,2.8-6.67L23,18.06c.25,0,.51.05.8.06,2.34.05,3.52-1.18,3.53-2.08A1,1,0,0,0,26.44,15a1,1,0,0,0-.93.77c-.11.5.74.95.08,1.38a3.74,3.74,0,0,1-2.52.36l.21-1.22c.45-2.31,1-5.15,3.07-5.22.15,0,.71,0,.72.38,0,.12,0,.15-.17.43a1,1,0,0,0,.91,1.59,1.21,1.21,0,0,0,1.09-1.31c0-1-1.1-1.67-2.5-1.62Z" transform="translate(-11.1 -10.52)"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Symfony </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/framework-integration/django/setup/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#092e20'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.09 19.37"><path d="M15.64,20.22c0,1.92,1.4,3.06,3.65,2.54V17.67c-2.28-.69-3.64.71-3.65,2.55m3.71-9.91h3.1V25c-3,.48-5.81.79-7.84-.34-2.62-1.47-2.83-6.12-.76-8.19a6.15,6.15,0,0,1,5.44-1.3V10.52C19.28,10.42,19.27,10.33,19.35,10.31Zm8.14,3.24H24.4V10.31h3.09v3.24Zm.05,1.68v6.69c-.13,2.72-.1,4.88-1.1,6.18a5.64,5.64,0,0,1-1,.9,3.14,3.14,0,0,1-1.17.68,5.63,5.63,0,0,1-1.51-.61,11.13,11.13,0,0,0-1.44-.69c1.17-.73,2.29-1.28,2.75-2.75a19.26,19.26,0,0,0,.34-4.95c0-1.79,0-3.87,0-5.45Z" transform="translate(-12.46 -10.31)"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Django </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/framework-integration/laravel/getting-started/introduction-to-scout-extended/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#f55247'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.43 14.76"><path d="M31,19.75c-.15-.16-2.11-2.63-2.45-3.05s-.52-.34-.73-.31l-3,.5c-.29.05-.47.16-.29.41l2.14,3.06-6.48,1.57-5.16-8.68c-.21-.31-.25-.41-.72-.39s-4,.32-4.3.34-.53.14-.28.74,4.32,9.42,4.44,9.68a.86.86,0,0,0,1.09.5c.71-.17,3.16-.81,4.5-1.17.71,1.29,2.15,3.91,2.42,4.28s.6.42,1.14.25,6.69-2.39,7-2.51.45-.2.26-.48-1.79-2.43-2.65-3.6l2.92-.78C31.13,20,31.17,19.91,31,19.75Zm-11.8,2.42-3.9.94c-.19.05-.19,0-.22,0s-4.32-9-4.37-9.1-.06-.2,0-.2l3.55-.31c.11,0,.1,0,.15.1S19.2,21.82,19.28,22,19.31,22.16,19.23,22.17Zm10.25,1.94c.05.09.11.15-.07.21s-6.15,2.1-6.26,2.15-.21.06-.36-.15-2.09-3.6-2.09-3.6L27,21.06c.16,0,.21-.08.31.08S29.42,24,29.48,24.11Zm.4-4.52-2.46.61-1.9-2.62c-.05-.08-.1-.15,0-.17L27.94,17c.1,0,.18-.05.3.11s1.77,2.26,1.83,2.34S30,19.56,29.88,19.59Z" transform="translate(-9.68 -12.86)"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Laravel </div> </div> </a> </div> </div> <div class='mx-32 mb-24'> <div class='text-xl font-semibold mb-24'> Tools </div> <div class='column-2 -mx-16'> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/tools/crawler/getting-started/overview/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.05 20.63"><rect x="16.95" y="2.95" width="1.47" height="1.47" style="fill:#a6b0f9"/><rect x="14" y="2.95" width="1.47" height="1.47" style="fill:#a6b0f9"/><rect x="11.05" y="2.95" width="1.47" height="1.47" style="fill:#a6b0f9"/><polygon points="0 11.05 25.05 11.05 25.05 9.58 0 9.58 0 11.05" style="fill:#565db6"/><path d="M5.16,9.58H19.89V1.47H5.16Zm-1.48,0V0H21.37V9.58Z" style="fill:#a6b0f9"/><polygon points="19.89 12.53 19.89 19.16 5.16 19.16 5.16 12.53 3.68 12.53 3.68 20.63 21.37 20.63 21.37 12.53 19.89 12.53" style="fill:#a6b0f9;fill-opacity:0.5"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Crawler </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/tools/cli/get-started/overview/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg viewBox="0 0 206.9 205.9" xmlns="http://www.w3.org/2000/svg"><path style="fill:#ebedfe;stroke-width:1.06667" d="M101.2 155c-1.8-4.7-.7-16.3 1.7-18 1.6-1.2 8.2-1.5 31.8-1.5 18.4 0 30.5.4 31.8 1 1.8 1 2 2.4 2 10 0 5.4-.5 9.3-1.2 10-1 1-9.8 1.4-33.1 1.4-31.9 0-31.9 0-33-3zm-58.4-22.3c-2-1.4-2.3-2.7-2.3-10 0-6.3.4-8.7 1.8-9.8.9-.8 8.5-4.6 16.8-8.4 8.3-3.9 15-7.7 15-8.4a61 61 0 0 0-14.9-8.3C51 84 43.5 80.2 42.4 79.2c-1.5-1.3-1.9-3.4-1.9-10 0-9.1 1.6-12.3 5.6-11 4.5 1.4 54.8 25.4 56.6 27 1.5 1.2 1.8 3.3 1.8 11 0 8.5-.2 9.5-2.4 11a1704 1704 0 0 1-54.8 26.2c-1.5.6-3 .3-4.5-.7z"/><path style="fill:#5367fe;stroke-width:1.06667" d="M15.4 203.1c-7-3.6-8.1-4.8-11.8-11.4-3-5.6-3-5.6-3-88.2C.5 20.8.5 20.8 3 15.7A30.6 30.6 0 0 1 17.5 2c4.1-1.8 9-2 86-2 81.8 0 81.8 0 88.3 3.2 7 3.6 12 9.7 14.1 17.2.7 2.6 1 33 .8 85.5-.3 81.5-.3 81.5-3.5 86.6a37.8 37.8 0 0 1-8.5 9c-5.3 3.8-5.3 3.8-89.7 4.1-84.3.3-84.3.3-89.6-2.5zm151.9-46.5c.7-.8 1.2-4.7 1.2-10.1 0-7.6-.2-9-2-10a249 249 0 0 0-31.8-1c-23.6 0-30.2.3-31.8 1.4-2.4 1.8-3.5 13.4-1.7 18 1.1 3 1.1 3 33 3 23.3 0 32.1-.4 33-1.3zm-92.6-36A708 708 0 0 0 102 107c2.2-1.4 2.4-2.4 2.4-11 0-7.6-.3-9.7-1.8-11-1.8-1.5-52.1-25.5-56.6-26.9-4-1.3-5.6 1.9-5.6 11 0 6.6.4 8.7 2 10 1 1 8.5 4.8 16.7 8.6a61 61 0 0 1 15 8.3 69 69 0 0 1-15.1 8.4 169 169 0 0 0-16.8 8.4c-1.4 1.1-1.8 3.5-1.8 9.8 0 7.3.3 8.6 2.3 10 2.7 1.9.5 2.7 31.9-12.1z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> CLI </div> </div> </a> </div> </div> </div> <div class='flex flex-col -mb-24'> <div class='flex flex-row mb-24'> <div class='mx-32'> <div class='text-xl font-semibold mb-24'> Platforms </div> <div class='column-2 -mx-16'> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/integration/magento-2/getting-started/quick-start/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#f26322'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 795 915"> <polygon points="396.9 0 0 229.1 0 686.7 113.3 752.2 112.5 294.5 396.1 130.8 679.7 294.5 679.7 752 793 686.7 793 228.7 396.9 0" fill="#f26322"/> <polygon points="453.1 752.1 396.5 785 339.6 752.4 339.6 294.5 226.4 359.9 226.6 817.6 396.4 915.7 566.4 817.6 566.4 359.9 453.1 294.5 453.1 752.1" fill="#f26322"/> </svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Magento 2 </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/integration/shopify/getting-started/quick-start/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#96bf48'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 109.5 124.5"> <path fill="#95BF47" d="M95.9 24.2c-0.1-0.6-0.6-1-1.1-1 -0.5 0-10-0.7-10-0.7s-6.6-6.6-7.4-7.3c-0.7-0.7-2.2-0.5-2.7-0.3 -0.1 0-1.5 0.4-3.7 1.1 -2.2-6.4-6.1-12.3-13-12.3 -0.2 0-0.4 0-0.6 0C55.4 1.1 53 0 50.9 0 34.8 0 27.1 20.1 24.7 30.3c-6.2 1.9-10.7 3.3-11.2 3.5 -3.5 1.1-3.6 1.2-4 4.5C9.1 40.7 0 111.2 0 111.2l71 13.3 38.5-8.3C109.5 116.2 96 24.9 95.9 24.2zM67 17.2c-1.8 0.6-3.8 1.2-6 1.9 0-0.4 0-0.8 0-1.3 0-4-0.6-7.2-1.4-9.7C63.2 8.5 65.5 12.5 67 17.2zM55.2 8.8c1 2.5 1.6 6 1.6 10.8 0 0.2 0 0.5 0 0.7 -3.9 1.2-8.2 2.5-12.4 3.8C46.8 15 51.3 10.5 55.2 8.8zM50.4 4.3c0.7 0 1.4 0.2 2.1 0.7 -5.1 2.4-10.7 8.5-13 20.7 -3.4 1.1-6.7 2.1-9.8 3C32.4 19.4 38.9 4.3 50.4 4.3z"/> <path fill="#5E8E3E" d="M94.8 23.2c-0.5 0-10-0.7-10-0.7s-6.6-6.6-7.4-7.3c-0.3-0.3-0.6-0.4-1-0.5L71 124.5l38.5-8.3c0 0-13.5-91.3-13.6-91.9C95.8 23.6 95.2 23.3 94.8 23.2z"/> <path fill="#FFFFFF" d="M57.9 44.5l-4.7 14.1c0 0-4.2-2.2-9.2-2.2 -7.5 0-7.8 4.7-7.8 5.9 0 6.4 16.8 8.9 16.8 24 0 11.9-7.5 19.5-17.7 19.5 -12.2 0-18.4-7.6-18.4-7.6l3.3-10.8c0 0 6.4 5.5 11.8 5.5 3.5 0 5-2.8 5-4.8 0-8.4-13.8-8.8-13.8-22.6 0-11.6 8.3-22.9 25.2-22.9C54.7 42.6 57.9 44.5 57.9 44.5z"/> </svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Shopify </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/integration/commercetools/getting-started/installation'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#00B39E'> <svg class="block h-full" viewBox="0 0 260 260" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M30.72 187.6V83.56C30.72 80.68 33.84 78.88 36.33 80.32L126.43 132.34C127.567 132.997 128.512 133.941 129.169 135.079C129.825 136.216 130.17 137.507 130.17 138.82V242.86C130.17 245.74 127.05 247.54 124.56 246.1L34.46 194.08C33.3225 193.423 32.378 192.479 31.7215 191.341C31.0649 190.204 30.7195 188.913 30.72 187.6Z" fill="#6359FF"/> <path d="M42.41 64.93L131.1 13.72C132.236 13.0616 133.527 12.7149 134.84 12.7149C136.153 12.7149 137.444 13.0616 138.58 13.72L227.27 64.93C230.39 66.73 230.39 71.23 227.27 73.03L138.58 124.24C137.444 124.898 136.153 125.245 134.84 125.245C133.527 125.245 132.236 124.898 131.1 124.24L42.41 73.03C39.29 71.23 39.29 66.73 42.41 64.93Z" fill="#FFC806"/> <path d="M139.52 242.85V146.37C139.52 143.49 142.64 141.69 145.13 143.13L227.28 190.56C230.4 192.36 230.4 196.86 227.28 198.66L145.13 246.09C142.64 247.53 139.52 245.73 139.52 242.85Z" fill="#0BBFBF"/> </svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> commercetools </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/integration/bigcommerce/get-started/installation'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#273A8A'> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" style="max-width:100%; max-height:100%;"> <path d="M33.72 36.432h8.073c2.296 0 3.75-1.263 3.75-3.3 0-1.913-1.454-3.3-3.75-3.3H33.72c-.268 0-.497.23-.497.46v5.663c.038.268.23.46.497.46zm0 13.048h8.34c2.564 0 4.094-1.3 4.094-3.597 0-2-1.454-3.597-4.094-3.597h-8.34c-.268 0-.497.23-.497.46v6.237c.038.306.23.497.497.497zM63.257.16l-23.875 23.8h3.903c6.084 0 9.68 3.826 9.68 7.997 0 3.3-2.22 5.7-4.6 6.772-.383.153-.383.7.038.842 2.755 1.07 4.706 3.94 4.706 7.308 0 4.744-3.176 8.532-9.336 8.532H26.87c-.268 0-.497-.23-.497-.46V36.93L.164 63.023c-.344.344-.115.957.383.957h63.016c.23 0 .42-.2.42-.42V.505c.115-.42-.42-.65-.727-.344z"></path> </svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> BigCommerce </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/integration/salesforce-commerce-cloud-b2c/getting-started/introduction/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#1798c1'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.74 179.01"><path d="M106.55,19.65a44.88,44.88,0,0,1,71.89,9.47,54.42,54.42,0,0,1,22.3-4.74c30.45,0,55.13,24.9,55.13,55.61s-24.68,55.62-55.13,55.62a54.72,54.72,0,0,1-10.86-1.08,40.33,40.33,0,0,1-52.81,16.59A46,46,0,0,1,51.59,149a42.32,42.32,0,0,1-8.78.91A43.22,43.22,0,0,1,21.47,69.46a49.67,49.67,0,0,1,85.08-49.81" transform="translate(-0.13 -0.13)" fill="#00a1e0"/><path d="M37.17,93c-.16.42.06.5.11.58a14.89,14.89,0,0,0,1.46.88,15.63,15.63,0,0,0,7.65,1.79c5.24,0,8.5-2.79,8.5-7.29v-.08c0-4.16-3.68-5.67-7.13-6.75l-.44-.15c-2.61-.85-4.85-1.57-4.85-3.29v-.09c0-1.46,1.31-2.54,3.35-2.54a15.16,15.16,0,0,1,6.66,1.7s.51.33.69-.16c.11-.26,1-2.62,1.07-2.87A.48.48,0,0,0,54,74.1a14.88,14.88,0,0,0-7.52-2H46c-4.81,0-8.16,2.9-8.16,7.06v.09c0,4.38,3.7,5.8,7.17,6.79l.55.17c2.53.78,4.7,1.45,4.7,3.23v.08c0,1.63-1.41,2.84-3.69,2.84a12.4,12.4,0,0,1-6.76-2c-.37-.21-.58-.37-.87-.54a.41.41,0,0,0-.69.24l-1,2.87Z" transform="translate(-0.13 -0.13)" fill="#ffffff"/><path d="M114,93c-.16.42.06.5.11.58a14.89,14.89,0,0,0,1.46.88,15.63,15.63,0,0,0,7.65,1.79c5.24,0,8.5-2.79,8.5-7.29v-.08c0-4.16-3.68-5.67-7.13-6.75l-.44-.15c-2.61-.85-4.85-1.57-4.85-3.29v-.09c0-1.46,1.31-2.54,3.34-2.54a15.2,15.2,0,0,1,6.67,1.7s.51.33.69-.16c.11-.26,1-2.62,1.07-2.87a.49.49,0,0,0-.25-.59,14.88,14.88,0,0,0-7.52-2h-.52c-4.81,0-8.16,2.9-8.16,7.06v.09c0,4.38,3.7,5.8,7.17,6.79l.55.17c2.53.78,4.71,1.45,4.71,3.23v.08c0,1.63-1.42,2.84-3.7,2.84a12.4,12.4,0,0,1-6.76-2c-.37-.21-.59-.36-.86-.54a.46.46,0,0,0-.7.24L114,93Z" transform="translate(-0.13 -0.13)" fill="#ffffff"/><path d="M166.4,84.16a10.71,10.71,0,0,1-1.41,6,4.69,4.69,0,0,1-4.26,2.08,4.64,4.64,0,0,1-4.24-2.08,10.89,10.89,0,0,1-1.39-6,10.79,10.79,0,0,1,1.39-5.93,4.64,4.64,0,0,1,4.24-2.06A4.73,4.73,0,0,1,165,78.23a10.7,10.7,0,0,1,1.4,5.93m4.38-4.71a10.39,10.39,0,0,0-2-3.8,9.67,9.67,0,0,0-3.36-2.56,12.2,12.2,0,0,0-9.39,0,9.67,9.67,0,0,0-3.36,2.56,10.61,10.61,0,0,0-2,3.8,17.35,17.35,0,0,0,0,9.41,10.66,10.66,0,0,0,2,3.81A9.45,9.45,0,0,0,156,95.2a12.44,12.44,0,0,0,9.39,0,9.36,9.36,0,0,0,3.36-2.53,10.44,10.44,0,0,0,2-3.81,17.61,17.61,0,0,0,0-9.41" transform="translate(-0.13 -0.13)" fill="#ffffff"/><path d="M206.74,91.51a.42.42,0,0,0-.56-.26,10.23,10.23,0,0,1-2,.58,16.13,16.13,0,0,1-2.4.17,6.67,6.67,0,0,1-5-1.88c-1.21-1.24-1.88-3.26-1.88-6a9.34,9.34,0,0,1,1.68-5.77,5.74,5.74,0,0,1,4.86-2.14,14.42,14.42,0,0,1,4.63.67s.35.15.51-.31c.38-1.06.67-1.82,1.07-3a.38.38,0,0,0-.27-.51,15.73,15.73,0,0,0-2.92-.74,21.25,21.25,0,0,0-3.28-.22,11.84,11.84,0,0,0-4.88.94,10.08,10.08,0,0,0-3.53,2.55,10.73,10.73,0,0,0-2.13,3.8,15,15,0,0,0-.72,4.72,12.59,12.59,0,0,0,2.92,8.72c1.94,2.15,4.85,3.25,8.64,3.25a17.82,17.82,0,0,0,6.2-1.11.39.39,0,0,0,.18-.52l-1.07-3Z" transform="translate(-0.13 -0.13)" fill="#ffffff"/><path d="M214.4,81.72a8.6,8.6,0,0,1,1.2-3.49,4.7,4.7,0,0,1,4.23-2.15A4.59,4.59,0,0,1,224,78.23a7.27,7.27,0,0,1,1,3.49Zm14.74-3.1a9,9,0,0,0-1.9-3.46A8.58,8.58,0,0,0,224.43,73a10.8,10.8,0,0,0-4.25-.86,11.56,11.56,0,0,0-4.89.95,9.77,9.77,0,0,0-3.41,2.61,10.67,10.67,0,0,0-2,3.84,16.81,16.81,0,0,0-.65,4.74,15.81,15.81,0,0,0,.67,4.73A9.93,9.93,0,0,0,212,92.79a9.75,9.75,0,0,0,3.73,2.47,15.13,15.13,0,0,0,5.38.87c4.28,0,6.54-1,7.46-1.49.17-.09.33-.25.13-.71l-1-2.71a.43.43,0,0,0-.56-.26,14.28,14.28,0,0,1-6.08,1.1,7,7,0,0,1-5.07-1.74c-1.1-1.09-1.64-2.69-1.73-4.94l14.82,0a.44.44,0,0,0,.43-.39,15.81,15.81,0,0,0-.44-6.39Z" transform="translate(-0.13 -0.13)" fill="#ffffff"/><path d="M95.68,81.72a8.6,8.6,0,0,1,1.2-3.49,4.72,4.72,0,0,1,4.24-2.15,4.62,4.62,0,0,1,4.16,2.15,7.5,7.5,0,0,1,1,3.49Zm14.74-3.1a9.16,9.16,0,0,0-1.89-3.46A8.79,8.79,0,0,0,105.72,73a10.8,10.8,0,0,0-4.25-.86,11.56,11.56,0,0,0-4.89.95,9.71,9.71,0,0,0-3.42,2.61,10.67,10.67,0,0,0-2,3.84,16.81,16.81,0,0,0-.65,4.74A15.81,15.81,0,0,0,91.18,89a9.53,9.53,0,0,0,5.87,6.24,15.13,15.13,0,0,0,5.38.87c4.28,0,6.54-1,7.47-1.49.16-.09.32-.25.12-.71l-1-2.71a.43.43,0,0,0-.56-.26,14.3,14.3,0,0,1-6.09,1.1,7.06,7.06,0,0,1-5.07-1.74c-1.1-1.09-1.63-2.69-1.73-4.94l14.83,0a.44.44,0,0,0,.43-.39,15.92,15.92,0,0,0-.45-6.39Z" transform="translate(-0.13 -0.13)" fill="#ffffff"/><path d="M63.64,91.43a2.82,2.82,0,0,1-.85-.88,3.47,3.47,0,0,1-.45-1.92,3.22,3.22,0,0,1,1.33-2.87s1.27-1.12,4.3-1.08A29.84,29.84,0,0,1,72,85v6.74h0a30.69,30.69,0,0,1-4,.53c-3,.18-4.36-.87-4.35-.87M69.54,81c-.6,0-1.38-.07-2.31-.07a14,14,0,0,0-3.65.47,9.58,9.58,0,0,0-3.1,1.43,6.93,6.93,0,0,0-2.94,5.86,7.79,7.79,0,0,0,.68,3.39,6.1,6.1,0,0,0,1.93,2.31,7.92,7.92,0,0,0,3,1.31,17.47,17.47,0,0,0,3.93.4,27,27,0,0,0,4.5-.37c1.45-.25,3.24-.61,3.73-.72l1-.27a.46.46,0,0,0,.34-.48V80.72c0-3-.79-5.18-2.35-6.54s-3.85-2.05-6.81-2.05a24.94,24.94,0,0,0-4,.36s-3.24.63-4.58,1.67a.47.47,0,0,0-.13.59l1,2.82a.37.37,0,0,0,.49.24,1.47,1.47,0,0,0,.24-.12,15,15,0,0,1,6.46-1.5,5.94,5.94,0,0,1,3.66,1c.81.62,1.22,1.55,1.22,3.53v.62c-1.27-.18-2.44-.28-2.44-.28" transform="translate(-0.13 -0.13)" fill="#ffffff"/><path d="M189.1,73.38a.39.39,0,0,0-.22-.53,12.46,12.46,0,0,0-2.49-.43,7.37,7.37,0,0,0-3.82.62,6.69,6.69,0,0,0-2.51,1.84v-1.8a.42.42,0,0,0-.42-.45h-3.8a.43.43,0,0,0-.43.45V95.19a.45.45,0,0,0,.45.45h3.9a.45.45,0,0,0,.45-.45v-11a12.89,12.89,0,0,1,.49-3.89,5.57,5.57,0,0,1,1.3-2.18,4.56,4.56,0,0,1,1.83-1.1,7.2,7.2,0,0,1,2-.28,8.44,8.44,0,0,1,1.63.2c.28,0,.44-.14.53-.4.26-.68,1-2.71,1.12-3.11" transform="translate(-0.13 -0.13)" fill="#ffffff"/><path d="M152.54,63.13a12.54,12.54,0,0,0-1.46-.35,11.9,11.9,0,0,0-2-.15,8.48,8.48,0,0,0-6.27,2.25,12.21,12.21,0,0,0-3,6.72l-.18,1h-3.37a.5.5,0,0,0-.5.43l-.55,3.08c0,.29.09.48.48.48H139l-3.32,18.55a23.22,23.22,0,0,1-.89,3.65,7.38,7.38,0,0,1-1,2.11,2.77,2.77,0,0,1-1.35,1,5.56,5.56,0,0,1-1.75.25,6.76,6.76,0,0,1-1.18-.13,3.86,3.86,0,0,1-.81-.26.4.4,0,0,0-.53.24c-.12.31-1,2.71-1.1,3a.44.44,0,0,0,.23.59,10.65,10.65,0,0,0,1.35.4,9.16,9.16,0,0,0,2.17.2,10.88,10.88,0,0,0,3.64-.56,6.89,6.89,0,0,0,2.74-1.91,9.65,9.65,0,0,0,1.93-3.32,28.57,28.57,0,0,0,1.3-5l3.34-18.9h4.88a.5.5,0,0,0,.5-.43l.55-3.09c0-.29-.08-.47-.48-.47h-4.74a20,20,0,0,1,.78-3.35,4.39,4.39,0,0,1,1-1.58,3.12,3.12,0,0,1,1.24-.77,5.26,5.26,0,0,1,1.59-.23,6.14,6.14,0,0,1,1.22.12A7.52,7.52,0,0,1,151,67c.48.14.55,0,.64-.23l1.14-3.11a.4.4,0,0,0-.28-.52" transform="translate(-0.13 -0.13)" fill="#ffffff"/><path d="M86.32,95.19a.43.43,0,0,1-.42.45H82a.43.43,0,0,1-.42-.45V63.55a.43.43,0,0,1,.42-.44H85.9a.43.43,0,0,1,.42.44V95.19Z" transform="translate(-0.13 -0.13)" fill="#ffffff"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Salesforce Commerce Cloud B2C </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/tools/crawler/netlify-plugin/quick-start/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#00AD9F'> <svg fill="none" height="113" viewBox="0 0 128 113" width="128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h128v112.635h-128z"/></clipPath><g clip-path="url(#a)"><path d="m34.593 94.0509h-1.2086l-6.033-6.033v-1.2085l9.2229-9.2228h6.3896l.8519.8519v6.3896z" fill="#05bdba"/><path d="m27.3514 25.816v-1.2086l6.033-6.033h1.2086l9.2228 9.2228v6.3896l-.8519.852h-6.3896z" fill="#05bdba"/><path d="m80.4594 74.6047h-8.777l-.7331-.733v-20.5458c0-3.6554-1.4364-6.4887-5.8447-6.5877-2.2686-.0595-4.8641 0-7.6378.1089l-.4161.426v26.5887l-.7331.733h-8.777l-.7331-.733v-35.0982l.7331-.7331h19.7533c7.6774 0 13.8986 6.2212 13.8986 13.8986v21.9426z" fill="#014847"/><g fill="#05bdba"><path d="m35.8412 61.4491h-35.10813l-.73307-.7331v-8.7968l.73307-.7331h35.10813l.7331.7331v8.7968z"/><path d="m127.277 61.4491h-35.1083l-.7331-.7331v-8.7968l.7331-.7331h35.1083l.733.7331v8.7968z"/><path d="m58.9428 27.0642v-26.33113l.7331-.73307h8.7968l.7331.73307v26.33113l-.7331.733h-8.7968z"/><path d="m58.9428 111.902v-26.3309l.7331-.7331h8.7968l.7331.7331v26.3309l-.7331.733h-8.7968z"/></g></g></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Netlify </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/integration/zendesk/get-started/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#00333B'> <svg xmlns="http://www.w3.org/2000/svg" class="block h-full" viewBox="0 0 360 258.79"><defs><style>.cls-1{fill:#03363d;}</style></defs><polygon class="cls-1" points="173.71 93.22 173.71 206.08 80.23 206.08 173.71 93.22"/><path class="cls-1" d="M173.71,52.71a46.74,46.74,0,0,1-93.48,0Z"/><polygon class="cls-1" points="189.11 165.57 189.11 52.71 282.6 52.71 189.11 165.57"/><path class="cls-1" d="M245.75,192.7a2.15,2.15,0,0,0-2.25,1.88h4.35A2,2,0,0,0,245.75,192.7Z"/><path class="cls-1" d="M235.85,159.33a46.75,46.75,0,0,0-46.74,46.75h93.48A46.74,46.74,0,0,0,235.85,159.33Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Zendesk </div> </div> </a> </div> </div> </div> </div> </div> </div> </div> </div> </header> <div class='flex-1 mx-auto w-full max-w-1440 bg-white pt-72'> <div class='flex h-full'> <aside class='fixed top-0 flex-shrink-0 bg-x-gradient-grey-200-grey-400-80 leading-tight lg:w-376 lg:flex lg:flex-col z-30 h-screen w-full hidden' data-target='app.sidebar'> <div class='lg:block h-72 flex-grow-0 flex-shrink-0 hidden'></div> <div class='flex-grow w-inherit overflow-y-auto h-full' data-controller='sidebar'> <div class='h-full'> <div class='px-40 pt-48 pb-24'> <div class='mb-32 uppercase text-xs text-grey-700 tracking-wide font-semibold leading-none'> React InstantSearch </div> <ul> <li class='mt-32'> <span class='mb-16 flex items-center capitalize text-grey-1100'> Basics </span> <ul> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/instantsearch/react/'> <InstantSearch> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/use-instantsearch/react/'> useInstantSearch() </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/index-widget/react/'> <Index> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/search-box/react/'> <SearchBox> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-xenon-600' data-active='true' data-target='sidebar.link' href='/doc/api-reference/widgets/configure/react/'> <Configure> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/autocomplete/react/'> useAutocomplete() </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/voice-search/react/'> useVoiceSearch() </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/insights/react/'> insights </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/middleware/react/'> middleware </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/render-state/react/'> renderState </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/connector/react/'> useConnector() </a> </li> </ul> </li> <li class='mt-32'> <span class='mb-16 flex items-center capitalize text-grey-1100'> Results </span> <ul> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/hits/react/'> <Hits> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/infinite-hits/react/'> <InfiniteHits> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/highlight/react/'> <Highlight> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/snippet/react/'> <Snippet> </a> </li> </ul> </li> <li class='mt-32'> <span class='mb-16 flex items-center capitalize text-grey-1100'> Recommendations </span> <ul> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/frequently-bought-together/react/'> <FrequentlyBoughtTogether> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/related-products/react/'> <RelatedProducts> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/trending-items/react/'> <TrendingItems> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/trending-facets/react/'> <TrendingFacets> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/looking-similar/react/'> <LookingSimilar> </a> </li> </ul> </li> <li class='mt-32'> <span class='mb-16 flex items-center capitalize text-grey-1100'> Refinements </span> <ul> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/refinement-list/react/'> <RefinementList> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/color-refinement-list/react/'> <ColorRefinementList> </a> <span class='ml-4 inline-block align-middle bg-xenon-600-opacity-20 text-xenon-600 px-8 py-5 text-xs rounded-full font-bold leading-none tracking-wide uppercase'> labs </span> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/dynamic-facets/react/'> <DynamicWidgets> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/hierarchical-menu/react/'> <HierarchicalMenu> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/range-slider/react/'> useRange() </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/menu/react/'> <Menu> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/current-refinements/react/'> <CurrentRefinements> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/range-input/react/'> <RangeInput> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/menu-select/react/'> <MenuSelect> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/toggle-refinement/react/'> <ToggleRefinement> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/numeric-menu/react/'> useNumericMenu() </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/rating-menu/react/'> useRatingMenu() </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/clear-refinements/react/'> <ClearRefinements> </a> </li> </ul> </li> <li class='mt-32'> <span class='mb-16 flex items-center capitalize text-grey-1100'> Pagination </span> <ul> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/pagination/react/'> <Pagination> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/hits-per-page/react/'> <HitsPerPage> </a> </li> </ul> </li> <li class='mt-32'> <span class='mb-16 flex items-center capitalize text-grey-1100'> Metadata </span> <ul> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/breadcrumb/react/'> <Breadcrumb> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/stats/react/'> <Stats> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/powered-by/react/'> <PoweredBy> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/state-results/react/'> StateResults </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/query-rule-custom-data/react/'> <QueryRulesCustomData> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/query-rule-context/react/'> <QueryRuleContext> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/query-rules/react/'> useQueryRules() </a> </li> </ul> </li> <li class='mt-32'> <span class='mb-16 flex items-center capitalize text-grey-1100'> Sorting </span> <ul> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/sort-by/react/'> <SortBy> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/relevant-sort/react/'> useRelevantSort() </a> </li> </ul> </li> <li class='mt-32'> <span class='mb-16 flex items-center capitalize text-grey-1100'> Geo Search </span> <ul> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/geo-search/react/'> useGeoSearch() </a> </li> </ul> </li> <li class='mt-32'> <span class='mb-16 flex items-center capitalize text-grey-1100'> Routing </span> <ul> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/simple-state-mapping/react/'> simple </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/history-router/react/'> history </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/ui-state/react/'> uiState </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/instantsearch-next-router/react/'> createInstantSearchRouterNext() </a> </li> </ul> </li> <li class='mt-32'> <span class='mb-16 flex items-center capitalize text-grey-1100'> Server </span> <ul> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/ssr-provider/react/'> <InstantSearchSSRProvider> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/server-state/react/'> getServerState() </a> </li> </ul> </li> <ul class='mb-16'> <li class='flex mt-16 mb-8 uppercase text-xs text-grey-700-opacity-80 tracking-wide font-semibold'> <span> Guides </span> </li> </ul> <ul></ul> <li class='py-2 pl-16 border-l-2 border-solid leading-normal border-grey-400-opacity-40'> <a class='flex justify-between group text-grey-700 hover:text-xenon-600' href='/doc/guides/building-search-ui/going-further/server-side-rendering/react/'> Server-side rendering </a> </li> </ul> </div> </div> </div> <div class='px-40'> <div class='flex flex-wrap items-center lg:justify-between -mx-16 py-16 border-grey-400-opacity-60 border-solid border-t'> <a class='block mx-16 py-8 text-sm text-grey-700 hover:text-grey-800 transition-fast-out' href='https://www.algolia.com/' target='_blank'> Algolia.com </a> <a class='block mx-16 py-8 text-sm text-grey-700 hover:text-grey-800 transition-fast-out' href='https://www.algolia.com/developers/' target='_blank'> Developer Hub </a> </div> </div> <button class='flex lg:hidden absolute items-center top-0 right-0 mt-48 mr-40 text-grey-700-opacity-90 hover:text-grey-700 fill-current transition-fast-out focus:outline-none focus:shadow-outline' data-action='click->app#toggleSidebar'> <span class='flex items-center h-16 w-16 mr-16 flex-grow-0 flex-shrink-0'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M8.41,7l5.3-5.29A1,1,0,1,0,12.29.29L7,5.59,1.71.29A1,1,0,0,0,.29,1.71L5.59,7,.29,12.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L7,8.41l5.29,5.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z"/></svg> </span> <span class='block flex-grow-0 flex-shrink-0 mt-2 font-sans-alt text-base leading-none'> Close </span> </button> </aside> <div class='w-full lg:ml-376 overflow-x-hidden'> <div class='flex p-24 md:px-56 md:pt-48 md:pb-24'> <main class='w-full min-h-full lg:max-w-648'> <div class='text-grey-1000 leading-normal'> <section class="mb-48"> <div class="mb-4 flex justify-between items-start"> <div class="text-xs leading-tight"> <div class="font-sans-alt uppercase font-semibold tracking-wide"> UI libraries / React InstantSearch / <a class="text-color-inherit" href="/doc/api-reference/widgets/react/">Widgets</a> </div> </div> <div class="hidden sm:flex items-center uppercase font-semibold tracking-wide text-grey-500 text-xs leading-tight whitespace-no-wrap font-sans-alt ml-16"> <span class="block mr-4 w-16 h-16 fill-current"> <span class="block p-2"> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path d="M11,22A11,11,0,1,1,22,11,11,11,0,0,1,11,22ZM11,2a9,9,0,1,0,9,9A9,9,0,0,0,11,2Z"/><path d="M15,14a.93.93,0,0,1-.45-.11l-4-2A1,1,0,0,1,10,11V5a1,1,0,0,1,2,0v5.38l3.45,1.73a1,1,0,0,1,.44,1.34A1,1,0,0,1,15,14Z"/></svg> </span> </span> Nov 14, 2024 </div> </div> <div class="flex justify-between"> <h1 class="md:text-4xl lg:text-5xl text-3xl leading-tall tracking-tight font-bold hyphenated"> <Configure> </h1> <div class="mt-16 ml-16 relative" data-target="app.editLinkContainer"> <a class='absolute top-0 right-0 edit-link w-24 h-24 items-center justify-center bg-grey-400-opacity-40 hover:bg-grey-400-opacity-60 rounded-full transition-fast-out hidden' data-segment-message='Clicked Edit Link' data-segment-source='Page (main title)' data-segment='' href='https://github.com/algolia/doc/edit/master//app_data/instantsearch/widgets/1-basics/05-configure/react.yml' rel='nofollow noopener' target='_blank'> <span class='flex items-center justify-center w-16 h-16 text-grey-700 fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.58 31.77"><path d="M16.29,0a16.29,16.29,0,0,0-5.15,31.75c.82.15,1.11-.36,1.11-.79s0-1.41,0-2.77C7.7,29.18,6.74,26,6.74,26a4.36,4.36,0,0,0-1.81-2.39c-1.47-1,.12-1,.12-1a3.43,3.43,0,0,1,2.49,1.68,3.48,3.48,0,0,0,4.74,1.36,3.46,3.46,0,0,1,1-2.18c-3.62-.41-7.42-1.81-7.42-8a6.3,6.3,0,0,1,1.67-4.37,5.94,5.94,0,0,1,.16-4.31s1.37-.44,4.48,1.67a15.41,15.41,0,0,1,8.16,0c3.11-2.11,4.47-1.67,4.47-1.67A5.91,5.91,0,0,1,25,11.07a6.3,6.3,0,0,1,1.67,4.37c0,6.26-3.81,7.63-7.44,8a3.85,3.85,0,0,1,1.11,3c0,2.18,0,3.94,0,4.47s.29.94,1.12.78A16.29,16.29,0,0,0,16.29,0Z"/></svg> <span aria-hidden='true' class='hidden'> Edit this page </span> </span> </a> <a class='unstyled-link text-base absolute top-0 right-0 edit-link w-24 h-24 items-center justify-center bg-grey-400-opacity-40 hover:bg-grey-400-opacity-60 rounded-full transition-fast-out hidden mr-32' data-segment-message='Clicked Edit in Atwood Link' data-segment-source='Page (main title)' data-segment='' href='https://atwood-editor.algolia.com/?gh-paths=/app_data/instantsearch/widgets/1-basics/05-configure/react.yml' rel='nofollow noopener' target='_blank' title='Edit this page'> <span class='flex items-center justify-center w-16 h-16 text-grey-700 fill-current font-bold'> A <span aria-hidden='true' class='hidden'> Edit this page </span> </span> </a> </div> </div> </section> <div class='content mb-32' data-controller='report-link' data-main=''> <p class="alert alert-info"><strong>This is the React InstantSearch v7 documentation.</strong> React InstantSearch v7 is the latest version of React InstantSearch and the stable version of React InstantSearch Hooks.<br /><br /> If you were using React InstantSearch v6, you can <a href="/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-v6-to-react-instantsearch-v7">upgrade to v7</a>.<br /><br /> If you were using React InstantSearch Hooks, you can still use the React InstantSearch v7 documentation, but you should check the <a href="/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-hooks-to-react-instantsearch-v7">upgrade guide</a> for necessary changes.<br /><br /> If you want to keep using React InstantSearch v6, you can find the <a href="/doc/deprecated/instantsearch/react/v6/api-reference/instantsearch/">archived documentation</a>.</p> <section id='method-overview'> <div> <div markdown="0"> <div class="snippet-wrapper"> <div class="signature"> <span class="small-title mb-8"> Signature </span> <div class="snippet-body signature-body"> <pre><Configure {...<a href='#widget-param-searchparameters'>searchParameters</a>} /> </pre> </div> </div> </div> </div> </div> <div class='snippet-wrapper'> <div class='import-declaration'> <span class='small-title'> Import </span> <div> <div class="snippet-wrapper" data-controller="snippet"> <div class="relative"> <div class="snippet-actions"> <div data-target="snippet.button" data-action="click->snippet#copy" class="copy-link snippet-action btn-satellite btn-satellite-white ml-8"> Copy </div> </div> <div data-target="snippet.pane" data-language="js" data-code="import { Configure } from 'react-instantsearch';" class="snippet-body "> <div class="highlight"><pre class="js javascript highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1 </pre></td><td class="rouge-code"><pre><span class="k">import</span> <span class="p">{</span> <span class="nx">Configure</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react-instantsearch</span><span class="dl">'</span><span class="p">;</span> </pre></td></tr></tbody></table></code></pre></div> </div> </div> </div> </div> </div> </div> <div class='flex items-center justify-center flex-col sm:flex-row'> <div class='text-center'> <a class='inline-block btn-skeuomorphic w-200 ml-16 mr-16 mt-16 mb-16 py-16 px-40' href='#examples'> See code examples </a> </div> <div class='text-center'> <a class='inline-block btn-skeuomorphic w-200 ml-16 mr-16 mt-16 mb-16 py-16 px-40' href='https://instantsearchjs.netlify.app/stories/?path=/story/basics-configure--force-1-hit-per-page' target='_blank'> See live example </a> </div> </div> </section> <section> <h2 id='about'> About this widget </h2> <p><code class="highlighter-rouge"><Configure></code> is a renderless component that lets you forward <a href="/doc/api-reference/search-api-parameters/">search parameters</a> to Algolia.</p> <p>Any prop you pass to this component is forwarded as a <a href="/doc/api-reference/search-api-parameters/">search parameter</a> to Algolia.</p> <p class="alert alert-warning">Don鈥檛 make the widget itself conditional, for example, in a ternary statement. Doing so creates an infinite loop.</p> <div class='panel'> <p> You can also create your own UI with <a href='#hook'><code>useConfigure()</code></a>. </p> </div> </section> <section> <h2 id='examples'> Examples </h2> <div class="language-jsx highlighter-rouge"><div class='snippet-wrapper' data-controller='snippet'> <div class="snippet-header"> <div class="nav-tabs snippet-tabs" markdown="0"> <button class='snippet-tab-wrapper snippet-tab-wrapper-active' data-target='snippet.tab' data-action='click->snippet#switch' data-switch-language='jsx'> <span class="snippet-tab"> JSX </span> </button> </div> </div> <div class='relative'> <div class="snippet-actions" markdown="0"> <div data-target="snippet.button" data-action="click->snippet#copy" class="copy-link snippet-action btn-satellite btn-satellite-white ml-8"> Copy </div> </div> <div data-target='snippet.pane' data-language='jsx' data-code='import React from 'react'; import { liteClient as algoliasearch } from 'algoliasearch/lite'; import { InstantSearch, Configure } from 'react-instantsearch'; const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey'); function App() { return ( <InstantSearch indexName="instant_search" searchClient={searchClient}> <Configure analytics={false} filters="free_shipping:true" hitsPerPage={40} /> </InstantSearch> ); } ' class='snippet-body '> <div class="highlight"><pre class="jsx jsx highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 </pre></td><td class="rouge-code"><pre><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">liteClient</span> <span class="k">as</span> <span class="nx">algoliasearch</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">algoliasearch/lite</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">InstantSearch</span><span class="p">,</span> <span class="nx">Configure</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react-instantsearch</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">searchClient</span> <span class="o">=</span> <span class="nx">algoliasearch</span><span class="p">(</span><span class="dl">'</span><span class="s1">YourApplicationID</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">YourSearchOnlyAPIKey</span><span class="dl">'</span><span class="p">);</span> <span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="p">(</span> <span class="p"><</span><span class="nc">InstantSearch</span> <span class="na">indexName</span><span class="p">=</span><span class="s">"instant_search"</span> <span class="na">searchClient</span><span class="p">=</span><span class="si">{</span><span class="nx">searchClient</span><span class="si">}</span><span class="p">></span> <span class="p"><</span><span class="nc">Configure</span> <span class="na">analytics</span><span class="p">=</span><span class="si">{</span><span class="kc">false</span><span class="si">}</span> <span class="na">filters</span><span class="p">=</span><span class="s">"free_shipping:true"</span> <span class="na">hitsPerPage</span><span class="p">=</span><span class="si">{</span><span class="mi">40</span><span class="si">}</span> <span class="p">/></span> <span class="p"></</span><span class="nc">InstantSearch</span><span class="p">></span> <span class="p">);</span> <span class="p">}</span> </pre></td></tr></tbody></table></code></pre></div> </div> </div> </div></div> </section> <section class='full-toc'> <h2 data-name='Props' id='props'> Props </h2> <div class="overflow-x-auto"> <table markdown="0" class="w-full"> <tr data-row-to-highlight class="border-none"> <td class="align-top scrollspy-sub-element" id="widget-param-searchparameters"> <code> ...searchParameters </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: SearchParameters </span> </div> </div> <p>A list of <a href="/doc/api-reference/search-api-parameters/">search parameters</a> to enable.</p> </td> </tr> <tr class="align-top"> <td colspan="2"> <div> <div class="language-jsx highlighter-rouge"><div class='snippet-wrapper' data-controller='snippet'> <div class="snippet-header"> <div class="nav-tabs snippet-tabs" markdown="0"> <button class='snippet-tab-wrapper snippet-tab-wrapper-active' data-target='snippet.tab' data-action='click->snippet#switch' data-switch-language='jsx'> <span class="snippet-tab"> JSX </span> </button> </div> </div> <div class='relative'> <div class="snippet-actions" markdown="0"> <div data-target="snippet.button" data-action="click->snippet#copy" class="copy-link snippet-action btn-satellite btn-satellite-white ml-8"> Copy </div> </div> <div data-target='snippet.pane' data-language='jsx' data-code='<Configure analytics={false} filters="free_shipping:true" hitsPerPage={40} /> ' class='snippet-body '> <div class="highlight"><pre class="jsx jsx highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1 2 3 4 5 </pre></td><td class="rouge-code"><pre><span class="p"><</span><span class="nc">Configure</span> <span class="na">analytics</span><span class="p">=</span><span class="si">{</span><span class="kc">false</span><span class="si">}</span> <span class="na">filters</span><span class="p">=</span><span class="s">"free_shipping:true"</span> <span class="na">hitsPerPage</span><span class="p">=</span><span class="si">{</span><span class="mi">40</span><span class="si">}</span> <span class="p">/></span> </pre></td></tr></tbody></table></code></pre></div> </div> </div> </div></div> </div> </td> </tr> </table> </div> </section> <h2 id="hook">Hook</h2> <p>React InstantSearch let you create your own UI for the <code class="highlighter-rouge"><Configure></code> widget with <code class="highlighter-rouge">useConfigure()</code>. Hooks provide APIs to access the widget state and interact with InstantSearch.</p> <p>The <code class="highlighter-rouge">useConfigure()</code> Hook accepts <a href="#hook-params"><strong>parameters</strong></a> and returns <a href="#hook-api"><strong>APIs</strong></a>. It must be used inside the <a href="/doc/api-reference/widgets/instantsearch/react/"><code class="highlighter-rouge"><InstantSearch></code></a> component.</p> <div class="text-center mt-24" data-component="button"> <p><a href="#hook-example" rel="noopener"> <span class="inline-block btn-skeuomorphic py-16 px-40"> See code examples </span> </a></p> </div> <h3 id="hook-usage">Usage</h3> <p>First, create your React component:</p> <div class="highlight"> <pre class="highlight">import { useConfigure } from 'react-instantsearch'; function CustomConfigure(<a href="#hook-params">props</a>) { const { <a href="#hook-api-refine">refine</a> } = useConfigure(<a href="#hook-params">props</a>); return null; } </pre> </div> <p>Then, render the widget:</p> <div class="highlight"> <pre class="highlight"><CustomConfigure {...<a href="#hook-params-searchparameters">searchParameters</a>} /> </pre> </div> <h3 id="hook-params">Parameters</h3> <p>Hooks accept parameters. You can pass them manually, or forward the props from your custom component.</p> <div class="alert alert-info"> <p>When you provide a function to Hooks, make sure to pass a stable reference to avoid rendering endlessly (for example, with <a href="https://reactjs.org/docs/hooks-reference.html#usecallback" target="_blank" rel="noopener"><code class="highlighter-rouge">useCallback()</code></a>). Objects and arrays are memoized; you don鈥檛 need to stabilize them.</p> </div> <div> <div class="overflow-x-auto"> <table class="w-full"> <tr data-row-to-highlight="" class="border-none"> <td class="align-top scrollspy-sub-element" id="hook-params-searchparameters"> <code> ...searchParameters </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: SearchParameters </span> </div> </div> <p>A list of <a href="/doc/api-reference/search-api-parameters/">search parameters</a> to enable. It returns an object with a <a href="#hook-api-refine"><code class="highlighter-rouge">refine</code></a> function that you can use to replace the provided search parameters with new ones.</p> </td> </tr> <tr class="align-top"> <td colspan="2"> <div> <div class="language-js highlighter-rouge"><div class="snippet-wrapper" data-controller="snippet"> <div class="snippet-header"> <div class="nav-tabs snippet-tabs"> <button class="snippet-tab-wrapper snippet-tab-wrapper-active" data-target="snippet.tab" data-action="click->snippet#switch" data-switch-language="js"> <span class="snippet-tab"> JavaScript </span> </button> </div> </div> <div class="relative"> <div class="snippet-actions"> <div data-target="snippet.button" data-action="click->snippet#copy" class="copy-link snippet-action btn-satellite btn-satellite-white ml-8"> Copy </div> </div> <div data-target="snippet.pane" data-language="js" data-code="const configureApi = useConfigure({ hitsPerPage: 4, analytics: false, distinct: true, }); " class="snippet-body "> <div class="highlight"><pre class="js javascript highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1 2 3 4 5 </pre></td><td class="rouge-code"><pre><span class="kd">const</span> <span class="nx">configureApi</span> <span class="o">=</span> <span class="nx">useConfigure</span><span class="p">({</span> <span class="na">hitsPerPage</span><span class="p">:</span> <span class="mi">4</span><span class="p">,</span> <span class="na">analytics</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="na">distinct</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="p">});</span> </pre></td></tr></tbody></table></code></pre></div> </div> </div> </div></div> </div> </td> </tr> </table> </div> </div> <h3 id="hook-api">APIs</h3> <p>Hooks return APIs, such as state and functions. You can use them to build your UI and interact with React InstantSearch.</p> <div> <div class="overflow-x-auto"> <table class="w-full"> <tr data-row-to-highlight="" class="border-none"> <td class="align-top scrollspy-sub-element" id="hook-api-refine"> <code> refine </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: (value: SearchParameters) => void </span> </div> </div> <p>Replaces the provided search parameters with new ones.</p> </td> </tr> <tr class="align-top"> <td colspan="2"> <div> <div class="language-jsx highlighter-rouge"><div class="snippet-wrapper" data-controller="snippet"> <div class="snippet-header"> <div class="nav-tabs snippet-tabs"> <button class="snippet-tab-wrapper snippet-tab-wrapper-active" data-target="snippet.tab" data-action="click->snippet#switch" data-switch-language="jsx"> <span class="snippet-tab"> JSX </span> </button> </div> </div> <div class="relative"> <div class="snippet-actions"> <div data-target="snippet.button" data-action="click->snippet#copy" class="copy-link snippet-action btn-satellite btn-satellite-white ml-8"> Copy </div> </div> <div data-target="snippet.pane" data-language="jsx" data-code="const { refine } = useConfigure({ hitsPerPage: 4, }); return ( <button onClick={() => refine({ hitsPerPage: 8 })}> Show 8 hits per page </button> ); " class="snippet-body "> <div class="highlight"><pre class="jsx jsx highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1 2 3 4 5 6 7 8 9 </pre></td><td class="rouge-code"><pre><span class="kd">const</span> <span class="p">{</span> <span class="nx">refine</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useConfigure</span><span class="p">({</span> <span class="na">hitsPerPage</span><span class="p">:</span> <span class="mi">4</span><span class="p">,</span> <span class="p">});</span> <span class="k">return</span> <span class="p">(</span> <span class="p"><</span><span class="nt">button</span> <span class="na">onClick</span><span class="p">=</span><span class="si">{</span><span class="p">()</span> <span class="o">=></span> <span class="nx">refine</span><span class="p">({</span> <span class="na">hitsPerPage</span><span class="p">:</span> <span class="mi">8</span> <span class="p">})</span><span class="si">}</span><span class="p">></span> Show 8 hits per page <span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p">);</span> </pre></td></tr></tbody></table></code></pre></div> </div> </div> </div></div> </div> </td> </tr> </table> </div> </div> <h3 id="hook-example">Example</h3> <div class="snippet-wrapper" data-controller="snippet"> <div class="snippet-header"> <div class="nav-tabs snippet-tabs"> <button class="snippet-tab-wrapper snippet-tab-wrapper-active" data-target="snippet.tab" data-action="click->snippet#switch" data-switch-language="js"> <span class="snippet-tab"> JavaScript </span> </button> <button class="snippet-tab-wrapper " data-target="snippet.tab" data-action="click->snippet#switch" data-switch-language="ts"> <span class="snippet-tab"> TypeScript </span> </button> </div> </div> <div class="relative"> <div class="snippet-actions"> <div data-target="snippet.button" data-action="click->snippet#copy" class="copy-link snippet-action btn-satellite btn-satellite-white ml-8"> Copy </div> </div> <div data-target="snippet.pane" data-language="js" data-code="import React from 'react'; import { useConfigure } from 'react-instantsearch'; function CustomConfigure(props) { useConfigure(props); return null; }" class="snippet-body "> <div class="highlight"> <pre class="jsx jsx highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1 2 3 4 5 6 7 8 </pre></td><td class="rouge-code"><pre><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">useConfigure</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react-instantsearch</span><span class="dl">'</span><span class="p">;</span> <span class="kd">function</span> <span class="nx">CustomConfigure</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span> <span class="nx">useConfigure</span><span class="p">(</span><span class="nx">props</span><span class="p">);</span> <span class="k">return</span> <span class="kc">null</span><span class="p">;</span> <span class="p">}</span> </pre></td></tr></tbody></table></code></pre> </div> </div> <div data-target="snippet.pane" data-language="ts" data-code="import React from 'react'; import { useConfigure, UseConfigureProps } from 'react-instantsearch'; function CustomConfigure(props: UseConfigureProps) { useConfigure(props); return null; }" class="snippet-body hidden"> <div class="highlight"> <pre class="ts typescript highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1 2 3 4 5 6 7 8 </pre></td><td class="rouge-code"><pre><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">useConfigure</span><span class="p">,</span> <span class="nx">UseConfigureProps</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react-instantsearch</span><span class="dl">'</span><span class="p">;</span> <span class="kd">function</span> <span class="nx">CustomConfigure</span><span class="p">(</span><span class="nx">props</span><span class="p">:</span> <span class="nx">UseConfigureProps</span><span class="p">)</span> <span class="p">{</span> <span class="nx">useConfigure</span><span class="p">(</span><span class="nx">props</span><span class="p">);</span> <span class="k">return</span> <span class="kc">null</span><span class="p">;</span> <span class="p">}</span> </pre></td></tr></tbody></table></code></pre> </div> </div> </div> </div> </div> <div class='mt-88'> <div class='-m-24'> <section class='p-24 w-full' data-controller='feedback-form' data-feedback-form-highlight-class='highlighted' data-target='app.form'> <div class='flex items-center mb-32 font-semibold text-xl'> <span class='block h-1 flex-grow bg-grey-700-opacity-10'></span> <span class='mx-32' data-regular-title='Did you find this page helpful?' data-report-title='Any feedback to share?' data-target='feedback-form.title'> Did you find this page helpful? </span> <span class='block h-1 flex-grow bg-grey-700-opacity-10'></span> </div> <form action='#' data-controller='support-form spam-prevention' data-spam-prevention-endpoint='https://docapi-prod.platform.algolia.net/feedback-form' data-spam-prevention-latency='3000' data-target='feedback-form.form spam-prevention.form' method='POST'> <div class='flex justify-center mb-32'> <button class='group mx-8 flex-grow-0 flex-shrink-0 flex justify-center items-center rounded-full w-64 h-64 stroke-current transition-fast-out pointer-events-none bg-green-200-opacity-40 text-green-500' data-action='click->feedback-form#upvote' data-disabled-class='pointer-events-none bg-green-200-opacity-40 text-green-500' data-disabled-title='Please wait one second before voting.' data-enabled-class='cursor-pointer bg-green-200-opacity-70 hover:bg-green-200 text-green-700' data-enabled-title='Yes, I found this page helpful.' data-nonselected-class='opacity-50' data-placeholder='What did you like about this page?' data-segment-message='Upvoted Page' data-segment='page-upvote' data-target='feedback-form.upvote' title='Please wait one second before voting.' type='button'> <div class='group-hover:-rotate-8 transition-fast-out w-24 h-24 p-2 -mt-2'> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-up block w-full h-full"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg> <span class='sr-only'> Yes, I found this page helpful. </span> </div> </button> <button class='group mx-8 flex-grow-0 flex-shrink-0 flex justify-center items-center rounded-full w-64 h-64 stroke-current transition-fast-out pointer-events-none bg-red-200-opacity-20 text-red-300' data-action='click->feedback-form#downvote' data-disabled-class='pointer-events-none bg-red-200-opacity-20 text-red-300' data-disabled-title='Please wait one second before voting.' data-enabled-class='cursor-pointer bg-red-200-opacity-40 hover:bg-red-200-opacity-70 text-red-500' data-enabled-title='No, I didn't find this page helpful.' data-nonselected-class='opacity-50' data-placeholder='What can we improve about this page?' data-segment-message='Downvoted Page' data-segment='page-downvote' data-target='feedback-form.downvote' title='Please wait one second before voting.' type='button'> <div class='group-hover:-rotate-8 transition-fast-out w-24 h-24 p-2 mt-2'> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-down block w-full h-full"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path></svg> <span class='sr-only'> No, I didn't find this page helpful. </span> </div> </button> </div> <div class='hidden' data-target='feedback-form.content' data-toggle-class='hidden' style='max-width:760px;margin-inline:auto;'> <div class='content'> <div class='alert alert-info mb-16'> <p>We appreciate your feedback! Please note that we can't respond.</p> <p> If you have questions, please reach out to <a href='https://www.algolia.com/support/?contact=' rel='noopener noreferrer' target='_blank'>the support team</a><span>.</span></p> </div> </div> <input class='leading-normalized' name='subject' type='hidden' value='[doc][feedback]'> <div class='hidden mt-16 blue-links' data-target='feedback-form.callback' data-toggle-class='hidden'> Looks like there's an issue on our end. Please copy the message below and send it to <a class='text-color-inherit' href='https://www.algolia.com/support/?contact=' rel='noopener noreferrer' target='_blank'>the support team</a><span>.</span></div> <textarea class='block w-full h-184 mt-16 bg-grey-200 rounded py-16 px-24 text-grey-700 resize-none shadow-none outline-none leading-normal' data-regular-placeholder='What's on your mind?' data-success-message='Thanks for submitting your feedback!' data-target='app.feedbackFormBody feedback-form.body' id='report-description' name='body' placeholder='What's on your mind?' required='required'></textarea> <input class='hidden' data-target='feedback-form.important' name='important' type='checkbox'> <div class='flex justify-center mt-32'> <button class='btn-skeuomorphic py-16 px-40 focus:outline-none focus:shadow-outline' data-regular-label='Submit' data-success-label='Submit another feedback' data-target='feedback-form.submit'> Submit </button> </div> </div> </form> </section> </div> </div> <footer class='mt-48 text-center text-grey-700 text-sm'> <p> 漏 Algolia 路 <a href="https://www.algolia.com/policies/privacy/" class="text-xenon-600 hover:underline">Privacy Policy</a> 路 <button class="text-xenon-600 hover:underline" onclick="window.OneTrust.ToggleInfoDisplay();">Cookie settings</button> </p> </footer> <script> window.ALGOLIA_DOCS_PAGE_UI = "react"; </script> </div> <div data-search-results=''></div> </main> <div class='ml-64 relative w-280 xxl:block hidden'> <div class='fixed w-inherit'> <div class='mb-32'> <div class='flex w-full flex-col' data-controller='language-switcher'> <div class='h-48 flex items-center bg-y-gradient-white-grey-200 font-sans-alt text-grey-800 font-semibold shadow cursor-pointer transition-fast-out rounded hover:shadow-md py-8 px-16 text-grey-1000 cursor-pointer' data-action='click@window->language-switcher#hide click->language-switcher#toggle'> <div class='w-full' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-react'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex items-center flex-grow ml-4 mr-8'> <span class='inline-block mr-8 text-sm mr-8 mt-2'> React InstantSearch </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v7 </span> </div> <div class='flex items-center'> <div class='flex-grow-0 flex-shrink-0 h-4 text-grey-800 opacity-75 fill-current'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8"><path d="M7,8a1,1,0,0,1-.71-.29l-6-6A1,1,0,0,1,1.71.29L7,5.59,12.29.29a1,1,0,1,1,1.42,1.42l-6,6A1,1,0,0,1,7,8Z"/></svg> </div> </div> </div> </div> </div> <div class='bg-y-gradient-white-grey-200 shadow rounded my-32 py-8 cursor-pointer hidden' data-target='language-switcher.list'> <a class='block py-8 px-16 hover:bg-grey-400-opacity-20 transition-fast-out text-grey-1000' href='/doc/api-reference/widgets/configure/android/'> <div class='android' data-action='click->language-switcher#flavor' data-language='android' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-android'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex justify-between items-center flex-grow ml-4'> <span class='inline-block mr-8 text-sm mr-8'> InstantSearch Android </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v3 </span> </div> </div> </div> </a> <a class='block py-8 px-16 hover:bg-grey-400-opacity-20 transition-fast-out text-grey-1000' href='/doc/api-reference/widgets/configure/flutter/'> <div class='flutter' data-action='click->language-switcher#flavor' data-language='flutter' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-flutter'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex justify-between items-center flex-grow ml-4'> <span class='inline-block mr-8 text-sm mr-8'> Algolia for Flutter </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v1 </span> </div> </div> </div> </a> <a class='block py-8 px-16 hover:bg-grey-400-opacity-20 transition-fast-out text-grey-1000' href='/doc/api-reference/widgets/configure/ios/'> <div class='ios' data-action='click->language-switcher#flavor' data-language='ios' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-ios'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex justify-between items-center flex-grow ml-4'> <span class='inline-block mr-8 text-sm mr-8'> InstantSearch iOS </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v7 </span> </div> </div> </div> </a> <a class='block py-8 px-16 hover:bg-grey-400-opacity-20 transition-fast-out text-grey-1000' href='/doc/api-reference/widgets/configure/js/'> <div class='js' data-action='click->language-switcher#flavor' data-language='js' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-js'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex justify-between items-center flex-grow ml-4'> <span class='inline-block mr-8 text-sm mr-8'> InstantSearch.js </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v4 </span> </div> </div> </div> </a> <a class='block py-8 px-16 hover:bg-grey-400-opacity-20 transition-fast-out text-grey-1000' href='/doc/api-reference/widgets/configure/react/'> <div class='react' data-action='click->language-switcher#flavor' data-language='react' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-react'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex justify-between items-center flex-grow ml-4'> <span class='inline-block mr-8 text-sm mr-8'> React InstantSearch </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v7 </span> </div> </div> </div> </a> <a class='block py-8 px-16 hover:bg-grey-400-opacity-20 transition-fast-out text-grey-1000' href='/doc/api-reference/widgets/configure/vue/'> <div class='vue' data-action='click->language-switcher#flavor' data-language='vue' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-vue'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex justify-between items-center flex-grow ml-4'> <span class='inline-block mr-8 text-sm mr-8'> Vue InstantSearch </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v4 </span> </div> </div> </div> </a> </div> </div> </div> <div class='h-full overflow-x-hidden overflow-y-auto -ml-16 pl-16' data-action='scroll@window->scrollspy#reveal scroll@window->scrollspy#spy' data-controller='scrollspy' data-scrollspy-fade='false' data-scrollspy-offset='40' data-scrollspy-section-offset='5'> <div class='font-sans-alt leading-normal'> <h3 class='mb-8 uppercase font-semibold tracking-wide text-grey-500 text-xs'>On this page</h3> <ul> <li> <span class='block group border-solid border-b border-grey-700-opacity-10'> <a class='flex py-8 text-grey-700 hover:text-grey-1000 transition-fast-out group-hover:shift-x-4 transition-fast-out' data-target='scrollspy.item' href='#about'> <span class='flex-grow-0 flex-shrink-0 w-4 h-8 mt-8 mr-16 -ml-16 fill-current rotate-270 opacity-0' data-target='scrollspy.chevron'> <span class='block h-4 mt-2'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8"><path d="M7,8a1,1,0,0,1-.71-.29l-6-6A1,1,0,0,1,1.71.29L7,5.59,12.29.29a1,1,0,1,1,1.42,1.42l-6,6A1,1,0,0,1,7,8Z"/></svg> </span> </span> <span class='-ml-4'> About this widget </span> </a> </span> </li> <li> <span class='block group border-solid border-b border-grey-700-opacity-10'> <a class='flex py-8 text-grey-700 hover:text-grey-1000 transition-fast-out group-hover:shift-x-4 transition-fast-out' data-target='scrollspy.item' href='#examples'> <span class='flex-grow-0 flex-shrink-0 w-4 h-8 mt-8 mr-16 -ml-16 fill-current rotate-270 opacity-0' data-target='scrollspy.chevron'> <span class='block h-4 mt-2'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8"><path d="M7,8a1,1,0,0,1-.71-.29l-6-6A1,1,0,0,1,1.71.29L7,5.59,12.29.29a1,1,0,1,1,1.42,1.42l-6,6A1,1,0,0,1,7,8Z"/></svg> </span> </span> <span class='-ml-4'> Examples </span> </a> </span> </li> <li> <span class='block group border-solid border-b border-grey-700-opacity-10'> <a class='flex py-8 text-grey-700 hover:text-grey-1000 transition-fast-out group-hover:shift-x-4 transition-fast-out' data-target='scrollspy.item' href='#props'> <span class='flex-grow-0 flex-shrink-0 w-4 h-8 mt-8 mr-16 -ml-16 fill-current rotate-270 opacity-0' data-target='scrollspy.chevron'> <span class='block h-4 mt-2'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8"><path d="M7,8a1,1,0,0,1-.71-.29l-6-6A1,1,0,0,1,1.71.29L7,5.59,12.29.29a1,1,0,1,1,1.42,1.42l-6,6A1,1,0,0,1,7,8Z"/></svg> </span> </span> <span class='-ml-4'> Props </span> </a> </span> <ul class='hidden ml-16' data-target='scrollspy.subnav'> <li> <span class='block group border-solid border-b border-grey-700-opacity-10'> <a class='flex py-8 text-grey-700 hover:text-grey-1000 transition-fast-out group-hover:shift-x-4 transition-fast-out' data-target='scrollspy.item' href='#widget-param-searchparameters'> <span class='flex-grow-0 flex-shrink-0 w-4 h-8 mt-8 mr-16 -ml-16 fill-current rotate-270 opacity-0' data-target='scrollspy.chevron'> <span class='block h-4 mt-2'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8"><path d="M7,8a1,1,0,0,1-.71-.29l-6-6A1,1,0,0,1,1.71.29L7,5.59,12.29.29a1,1,0,1,1,1.42,1.42l-6,6A1,1,0,0,1,7,8Z"/></svg> </span> </span> <span class='-ml-4'> ...searchParameters </span> </a> </span> </li> </ul> </li> <li> <span class='block group border-solid border-b border-grey-700-opacity-10'> <a class='flex py-8 text-grey-700 hover:text-grey-1000 transition-fast-out group-hover:shift-x-4 transition-fast-out' data-target='scrollspy.item' href='#hook'> <span class='flex-grow-0 flex-shrink-0 w-4 h-8 mt-8 mr-16 -ml-16 fill-current rotate-270 opacity-0' data-target='scrollspy.chevron'> <span class='block h-4 mt-2'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8"><path d="M7,8a1,1,0,0,1-.71-.29l-6-6A1,1,0,0,1,1.71.29L7,5.59,12.29.29a1,1,0,1,1,1.42,1.42l-6,6A1,1,0,0,1,7,8Z"/></svg> </span> </span> <span class='-ml-4'> Hook </span> </a> </span> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <a class='fixed xxl:block hidden right-0 bottom-0 group mr-32 py-8 px-16 mb-24 btn-skeuomorphic rounded font-sans-alt transition-fast-out z-20' data-segment-message='Clicked Need Help' data-segment='need-help' href='https://www.algolia.com/support/'> <span class='flex items-center py-2'> <img src="/doc/assets/images/support/support-75277c68.svg" class="block mr-8" alt="Support" /> <span class='text-grey-700 group-hover:text-grey-800 mt-4'> Need help? </span> </span> </a> <div class='fixed xxl:hidden block min-w-136 right-0 bottom-0 mr-32 mb-24 z-20'> <div class='flex w-full flex-col-reverse' data-controller='language-switcher'> <div class='h-48 flex items-center bg-y-gradient-white-grey-200 font-sans-alt text-grey-800 font-semibold shadow cursor-pointer transition-fast-out rounded hover:shadow-md py-8 px-16 text-grey-1000 cursor-pointer' data-action='click@window->language-switcher#hide click->language-switcher#toggle'> <div class='w-full' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-react'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex items-center flex-grow ml-4 mr-8'> <span class='inline-block mr-8 text-sm mr-8 mt-2'> React InstantSearch </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v7 </span> </div> <div class='flex items-center'> <div class='flex-grow-0 flex-shrink-0 h-4 text-grey-800 opacity-75 fill-current'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8"><path d="M7,8a1,1,0,0,1-.71-.29l-6-6A1,1,0,0,1,1.71.29L7,5.59,12.29.29a1,1,0,1,1,1.42,1.42l-6,6A1,1,0,0,1,7,8Z"/></svg> </div> </div> </div> </div> </div> <div class='bg-y-gradient-white-grey-200 shadow rounded my-32 py-8 cursor-pointer hidden' data-target='language-switcher.list'> <a class='block py-8 px-16 hover:bg-grey-400-opacity-20 transition-fast-out text-grey-1000' href='/doc/api-reference/widgets/configure/android/'> <div class='android' data-action='click->language-switcher#flavor' data-language='android' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-android'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex justify-between items-center flex-grow ml-4'> <span class='inline-block mr-8 text-sm mr-8'> InstantSearch Android </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v3 </span> </div> </div> </div> </a> <a class='block py-8 px-16 hover:bg-grey-400-opacity-20 transition-fast-out text-grey-1000' href='/doc/api-reference/widgets/configure/flutter/'> <div class='flutter' data-action='click->language-switcher#flavor' data-language='flutter' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-flutter'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex justify-between items-center flex-grow ml-4'> <span class='inline-block mr-8 text-sm mr-8'> Algolia for Flutter </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v1 </span> </div> </div> </div> </a> <a class='block py-8 px-16 hover:bg-grey-400-opacity-20 transition-fast-out text-grey-1000' href='/doc/api-reference/widgets/configure/ios/'> <div class='ios' data-action='click->language-switcher#flavor' data-language='ios' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-ios'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex justify-between items-center flex-grow ml-4'> <span class='inline-block mr-8 text-sm mr-8'> InstantSearch iOS </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v7 </span> </div> </div> </div> </a> <a class='block py-8 px-16 hover:bg-grey-400-opacity-20 transition-fast-out text-grey-1000' href='/doc/api-reference/widgets/configure/js/'> <div class='js' data-action='click->language-switcher#flavor' data-language='js' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-js'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex justify-between items-center flex-grow ml-4'> <span class='inline-block mr-8 text-sm mr-8'> InstantSearch.js </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v4 </span> </div> </div> </div> </a> <a class='block py-8 px-16 hover:bg-grey-400-opacity-20 transition-fast-out text-grey-1000' href='/doc/api-reference/widgets/configure/react/'> <div class='react' data-action='click->language-switcher#flavor' data-language='react' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-react'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex justify-between items-center flex-grow ml-4'> <span class='inline-block mr-8 text-sm mr-8'> React InstantSearch </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v7 </span> </div> </div> </div> </a> <a class='block py-8 px-16 hover:bg-grey-400-opacity-20 transition-fast-out text-grey-1000' href='/doc/api-reference/widgets/configure/vue/'> <div class='vue' data-action='click->language-switcher#flavor' data-language='vue' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-vue'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex justify-between items-center flex-grow ml-4'> <span class='inline-block mr-8 text-sm mr-8'> Vue InstantSearch </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v4 </span> </div> </div> </div> </a> </div> </div> </div> <script crossorigin='anonymous' src='https://js.sentry-cdn.com/a1aef08d297f4cc7bb37ffea1c88e373.min.js'></script> <script data-ot-ignore src='/doc/assets/javascripts/index-ebcad9d3.js'></script> <script data-ot-ignore src='/doc/assets/javascripts/search2-c04a2110.js'></script> <script src='/doc/assets/javascripts/load-async-168b6435.js'></script> <script> window.GOOGLE_TAG_MANAGER_ID = 'GTM-N8JP8G'; window.SEGMENT_ID = 'cKQbv9nMHIUgdWswDLG0c3UdiUgBaUmA'; loadjs([ "/doc/assets/javascripts/analytics-4029c16c.js", "/doc/assets/javascripts/mutiny-d89a9f5a.js" ]); </script> </div> </body> </html>