CINXE.COM

<!DOCTYPE html> <html lang='en'> <head> <title>RefinementList | React InstantSearch | Algolia</title> <meta content='A widget to display multi-select facets.' 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='RefinementList | React InstantSearch | Algolia' name='twitter:title'> <meta content='A widget to display multi-select facets.' name='twitter:description'> <meta content='https://www.algolia.com/doc/api-reference/widgets/refinement-list/react/' property='og:url'> <meta content='website' property='og:type'> <meta content='RefinementList | React InstantSearch | Algolia' property='og:title'> <meta content='A widget to display multi-select facets.' 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/refinement-list/react/' rel='canonical'> <meta name='<RefinementList>' 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-grey-700' data-active='false' 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-xenon-600' data-active='true' 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"> <RefinementList> </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/3-refinements/0-refinement-list/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/3-refinements/0-refinement-list/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><RefinementList <a href='#widget-param-attribute'>attribute</a>={<span class='underline'>string</span>} <span class="comment"> // Optional parameters</span> <a href='#widget-param-operator'>operator</a>={<span class='underline'>'and' | 'or'</span>} <a href='#widget-param-limit'>limit</a>={<span class='underline'>number</span>} <a href='#widget-param-showmore'>showMore</a>={<span class='underline'>boolean</span>} <a href='#widget-param-showmorelimit'>showMoreLimit</a>={<span class='underline'>number</span>} <a href='#widget-param-searchable'>searchable</a>={<span class='underline'>boolean</span>} <a href='#widget-param-searchableplaceholder'>searchablePlaceholder</a>={<span class='underline'>string</span>} <a href='#widget-param-sortby'>sortBy</a>={<span class='underline'>string[] | function</span>} <a href='#widget-param-escapefacetvalues'>escapeFacetValues</a>={<span class='underline'>boolean</span>} <a href='#widget-param-transformitems'>transformItems</a>={<span class='underline'>function</span>} <a href='#widget-param-classnames'>classNames</a>={<span class='underline'>object</span>} <a href='#widget-param-translations'>translations</a>= {<span class='underline'>object</span>} <a href='#widget-param-props'>...props</a>={<span class='underline'>ComponentProps<'div'></span>} /> </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 { RefinementList } 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">RefinementList</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/js/?path=/story/refinements-refinementlist--default' target='_blank'> See live example </a> </div> </div> </section> <section> <h2 id='about'> About this widget </h2> <p><code class="highlighter-rouge"><RefinementList></code> is a widget that lets users filter the dataset using multi-select facets.</p> <p>A refinement list only displays the most relevant facet values for the current search context. The <a href="#widget-param-sortby"><code class="highlighter-rouge">sortBy</code></a> option only affects how the facets are ordered, not which facets are returned.</p> <p>This widget includes a “search for facet values” feature, enabling users to search through the <a href="/doc/guides/managing-results/refine-results/faceting/#search-for-facet-values">values of a specific facet attribute</a>. This makes it easy to find uncommon facet values.</p> <div class="alert alert-info"> <p>The <a href="#widget-param-attribute"><code class="highlighter-rouge">attribute</code></a> provided to the widget must be in attributes for faceting, either on the <a href="/doc/guides/managing-results/refine-results/faceting/how-to/declaring-attributes-for-faceting-with-dashboard/">dashboard</a> or using the <a href="/doc/api-reference/api-parameters/attributesForFaceting/"><code class="highlighter-rouge">attributesForFaceting</code></a> parameter with the API.</p> <p>If you are using the <a href="#widget-param-searchable"><code class="highlighter-rouge">searchable</code></a> prop, you also need to make the attribute searchable using the <a href="/doc/guides/managing-results/refine-results/faceting/how-to/declaring-attributes-for-faceting-with-dashboard/">dashboard</a> or using the <code class="highlighter-rouge">searchable</code> modifier of <a href="/doc/api-reference/api-parameters/attributesForFaceting/"><code class="highlighter-rouge">attributesForFaceting</code></a> with the API.</p> </div> <h3 id="disappearing-facet-values">Disappearing facet values</h3> <p>With many facet values, the available options can change depending on the user’s query. The refinement widget displays the most common facet values for a given query.</p> <p>A user’s chosen value can vanish if they alter the query. This occurs because only the most common facet values are displayed when there are many options. A previously selected value might not appear if it’s uncommon for the new query.</p> <p>To also show less common values, adjust the maximum number of values with the <a href="/doc/api-reference/widgets/configure/react/"><code class="highlighter-rouge">configure</code></a> widget. It doesn’t change how many items are shown: the limits you set with <a href="/doc/api-reference/widgets/refinement-list/react/#widget-param-limit"><code class="highlighter-rouge">limit</code></a> and <a href="/doc/api-reference/widgets/refinement-list/react/#widget-param-showmorelimit"><code class="highlighter-rouge">showMoreLimit</code></a> still apply.</p> <h3 id="how-to-implement-a-show-more-feature">How to implement a “Show more” feature</h3> <p>A custom <code class="highlighter-rouge">useRefinementList()</code> widget displays up to <code class="highlighter-rouge">showMoreLimit</code> refinement <code class="highlighter-rouge">items</code>. You can sort the items as desired before they’re trimmed. However, you’ll need to slice to the appropriate <code class="highlighter-rouge">limit</code> and keep track of <code class="highlighter-rouge">isShowingMore</code> in the local state:</p> <div class="language-js 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='js'> <span class="snippet-tab"> JavaScript </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='js' data-code='const CustomRefinementList = connectRefinementList(function RefinementList({ items, limit, showMoreLimit }) { const [isShowingMore, toggleShowMore] = React.useState(false) const itemsToDisplay = items.slice( 0, isShowingMore ? showMoreLimit : limit ) // render using `itemsToDisplay` }) ' 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 6 7 8 9 10 11 12 13 </pre></td><td class="rouge-code"><pre><span class="kd">const</span> <span class="nx">CustomRefinementList</span> <span class="o">=</span> <span class="nx">connectRefinementList</span><span class="p">(</span><span class="kd">function</span> <span class="nx">RefinementList</span><span class="p">({</span> <span class="nx">items</span><span class="p">,</span> <span class="nx">limit</span><span class="p">,</span> <span class="nx">showMoreLimit</span> <span class="p">})</span> <span class="p">{</span> <span class="kd">const</span> <span class="p">[</span><span class="nx">isShowingMore</span><span class="p">,</span> <span class="nx">toggleShowMore</span><span class="p">]</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">useState</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> <span class="kd">const</span> <span class="nx">itemsToDisplay</span> <span class="o">=</span> <span class="nx">items</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">isShowingMore</span> <span class="p">?</span> <span class="nx">showMoreLimit</span> <span class="p">:</span> <span class="nx">limit</span> <span class="p">)</span> <span class="c1">// render using `itemsToDisplay`</span> <span class="p">})</span> </pre></td></tr></tbody></table></code></pre></div> </div> </div> </div></div> <div class='panel'> <p> You can also create your own UI with <a href='#hook'><code>useRefinementList()</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, RefinementList } from 'react-instantsearch'; const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey'); function App() { return ( <InstantSearch indexName="instant_search" searchClient={searchClient}> <RefinementList attribute="brand" /> </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 </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">RefinementList</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">RefinementList</span> <span class="na">attribute</span><span class="p">=</span><span class="s">"brand"</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-attribute"> <code> attribute </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: string </span> </div> <div class="py-4"> <span class="block label"> Required </span> </div> </div> <p>The name of the attribute in the records.</p> <p>To avoid unexpected behavior, you can’t use the same <code class="highlighter-rouge">attribute</code> prop in a different type of widget.</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='<RefinementList attribute="categories" /> ' 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 </pre></td><td class="rouge-code"><pre><span class="p"><</span><span class="nc">RefinementList</span> <span class="na">attribute</span><span class="p">=</span><span class="s">"categories"</span> <span class="p">/></span> </pre></td></tr></tbody></table></code></pre></div> </div> </div> </div></div> </div> </td> </tr> <tr data-row-to-highlight class="border-none"> <td class="align-top scrollspy-sub-element" id="widget-param-operator"> <code> operator </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: 'and'|'or' </span> </div> <div class="py-4 mr-8"> <span class="block label"> default: 'or' </span> </div> <div class="py-4"> <span class="block label"> Optional </span> </div> </div> <p>How the facets are combined.</p> <ul> <li><code class="highlighter-rouge">'or'</code>: Returns results matching any of the selected values.</li> <li><code class="highlighter-rouge">'and'</code>: Returns results matching all selected values.</li> </ul> <p>Use <a href="/doc/guides/managing-results/refine-results/filtering/in-depth/filters-and-facetfilters/">filters or facet filters</a> for more complex result refinement.</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='<RefinementList // ... operator="and" /> ' 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 </pre></td><td class="rouge-code"><pre><span class="p"><</span><span class="nc">RefinementList</span> <span class="c1">// ...</span> <span class="na">operator</span><span class="p">=</span><span class="s">"and"</span> <span class="p">/></span> </pre></td></tr></tbody></table></code></pre></div> </div> </div> </div></div> </div> </td> </tr> <tr data-row-to-highlight class="border-none"> <td class="align-top scrollspy-sub-element" id="widget-param-limit"> <code> limit </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: number </span> </div> <div class="py-4 mr-8"> <span class="block label"> default: 10 </span> </div> <div class="py-4"> <span class="block label"> Optional </span> </div> </div> <p>How many facet values to retrieve.</p> <p>When you set <a href="#widget-param-showmore"><code class="highlighter-rouge">showMore</code></a> and <a href="#widget-param-showmorelimit"><code class="highlighter-rouge">showMoreLimit</code></a>, this is the number of facet values to display before clicking the <strong>Show more</strong> button.</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='<RefinementList // ... limit={5} /> ' 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 </pre></td><td class="rouge-code"><pre><span class="p"><</span><span class="nc">RefinementList</span> <span class="c1">// ...</span> <span class="na">limit</span><span class="p">=</span><span class="si">{</span><span class="mi">5</span><span class="si">}</span> <span class="p">/></span> </pre></td></tr></tbody></table></code></pre></div> </div> </div> </div></div> </div> </td> </tr> <tr data-row-to-highlight class="border-none"> <td class="align-top scrollspy-sub-element" id="widget-param-showmore"> <code> showMore </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: boolean </span> </div> <div class="py-4 mr-8"> <span class="block label"> default: false </span> </div> <div class="py-4"> <span class="block label"> Optional </span> </div> </div> <p>Whether to display a button that expands the number of items.</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='<RefinementList // ... showMore={true} /> ' 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 </pre></td><td class="rouge-code"><pre><span class="p"><</span><span class="nc">RefinementList</span> <span class="c1">// ...</span> <span class="na">showMore</span><span class="p">=</span><span class="si">{</span><span class="kc">true</span><span class="si">}</span> <span class="p">/></span> </pre></td></tr></tbody></table></code></pre></div> </div> </div> </div></div> </div> </td> </tr> <tr data-row-to-highlight class="border-none"> <td class="align-top scrollspy-sub-element" id="widget-param-showmorelimit"> <code> showMoreLimit </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: number </span> </div> <div class="py-4"> <span class="block label"> Optional </span> </div> </div> <p>The maximum number of items to display if the widget is showing more items.</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='<RefinementList // ... showMoreLimit={20} /> ' 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 </pre></td><td class="rouge-code"><pre><span class="p"><</span><span class="nc">RefinementList</span> <span class="c1">// ...</span> <span class="na">showMoreLimit</span><span class="p">=</span><span class="si">{</span><span class="mi">20</span><span class="si">}</span> <span class="p">/></span> </pre></td></tr></tbody></table></code></pre></div> </div> </div> </div></div> </div> </td> </tr> <tr data-row-to-highlight class="border-none"> <td class="align-top scrollspy-sub-element" id="widget-param-searchable"> <code> searchable </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: boolean </span> </div> <div class="py-4 mr-8"> <span class="block label"> default: false </span> </div> <div class="py-4"> <span class="block label"> Optional </span> </div> </div> <p>Whether to add a search input to let users search for more facet values.</p> <p>You need to make the <code class="highlighter-rouge">attribute</code> searchable using the <a href="/doc/guides/managing-results/refine-results/faceting/how-to/declaring-attributes-for-faceting-with-dashboard/">dashboard</a>) or using the <code class="highlighter-rouge">searchable</code> modifier of <a href="/doc/api-reference/api-parameters/attributesForFaceting/"><code class="highlighter-rouge">attributesForFaceting</code></a> with the API.</p> <p class="alert alert-info">In some situations, refined facet values might not be present in the data returned by Algolia.</p> </td> </tr> <tr class="align-top"> <td colspan="2"> <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="boolean" data-code="<RefinementList // ... searchable={true} />" 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 </pre></td><td class="rouge-code"><pre><span class="p"><</span><span class="nc">RefinementList</span> <span class="c1">// ...</span> <span class="na">searchable</span><span class="p">=</span><span class="si">{</span><span class="kc">true</span><span class="si">}</span> <span class="p">/></span> </pre></td></tr></tbody></table></code></pre> </div> </div> </div> </div> </div> </td> </tr> <tr data-row-to-highlight class="border-none"> <td class="align-top scrollspy-sub-element" id="widget-param-searchableplaceholder"> <code> searchablePlaceholder </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: string </span> </div> <div class="py-4"> <span class="block label"> Optional </span> </div> </div> <p>The value of the search input’s placeholder.</p> </td> </tr> <tr class="align-top"> <td colspan="2"> <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="string" data-code="<RefinementList // ... searchablePlaceholder="Search our products" />" 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 </pre></td><td class="rouge-code"><pre><span class="p"><</span><span class="nc">RefinementList</span> <span class="c1">// ...</span> <span class="na">searchablePlaceholder</span><span class="p">=</span><span class="s">"Search our products"</span> <span class="p">/></span> </pre></td></tr></tbody></table></code></pre> </div> </div> </div> </div> </div> </td> </tr> <tr data-row-to-highlight class="border-none"> <td class="align-top scrollspy-sub-element" id="widget-param-sortby"> <code> sortBy </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: string[] | (a: FacetValue, b: FacetValue) => number </span> </div> <div class="py-4 mr-8"> <span class="block label"> default: ["isRefined", "count:desc", "name:asc"], or `facetOrdering` if set </span> </div> <div class="py-4"> <span class="block label"> Optional </span> </div> </div> <p>How to sort refinements. Must be one or more of the following strings:</p> <ul> <li><code class="highlighter-rouge">"count"</code> (same as <code class="highlighter-rouge">"count:desc"</code>)</li> <li><code class="highlighter-rouge">"count:asc"</code></li> <li><code class="highlighter-rouge">"count:desc"</code></li> <li><code class="highlighter-rouge">"name"</code> (same as <code class="highlighter-rouge">"name:asc"</code>)</li> <li><code class="highlighter-rouge">"name:asc"</code></li> <li><code class="highlighter-rouge">"name:desc"</code></li> <li><code class="highlighter-rouge">"isRefined"</code> (same as <code class="highlighter-rouge">"isRefined:asc"</code>)</li> <li><code class="highlighter-rouge">"isRefined:asc"</code></li> <li><code class="highlighter-rouge">"isRefined:desc"</code></li> </ul> <p>You can also use a sort function that behaves like the standard Javascript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Syntax" target="_blank" rel="noopener"><code class="highlighter-rouge">compareFunction</code></a>.</p> <p>When you don’t set this parameter, and you’ve set <code class="highlighter-rouge">facetOrdering</code> for this facet in <code class="highlighter-rouge">renderingContent</code>, facets are sorted using <code class="highlighter-rouge">facetOrdering</code> and use the default order as a fallback.</p> <p class="alert alert-info">In some situations, refined facet values might not be present in the data returned by Algolia.</p> </td> </tr> <tr class="align-top"> <td colspan="2"> <div> <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="String"> <span class="snippet-tab"> String </span> </button> <button class="snippet-tab-wrapper " data-target="snippet.tab" data-action="click->snippet#switch" data-switch-language="Function"> <span class="snippet-tab"> Function </span> </button> <button class="snippet-tab-wrapper " data-target="snippet.tab" data-action="click->snippet#switch" data-switch-language="Function (TypeScript)"> <span class="snippet-tab"> Function (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="String" data-code="<RefinementList // ... sortBy={['count:desc', 'name:asc']} />" 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 </pre></td><td class="rouge-code"><pre><span class="p"><</span><span class="nc">RefinementList</span> <span class="c1">// ...</span> <span class="na">sortBy</span><span class="p">=</span><span class="si">{</span><span class="p">[</span><span class="dl">'</span><span class="s1">count:desc</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">name:asc</span><span class="dl">'</span><span class="p">]</span><span class="si">}</span> <span class="p">/></span> </pre></td></tr></tbody></table></code></pre> </div> </div> <div data-target="snippet.pane" data-language="Function" data-code="const sortByName = (a, b) => { return a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase() ? -1 : 1; }; function Search() { return ( <RefinementList // ... sortBy={sortByName} /> ); }" class="snippet-body hidden"> <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 </pre></td><td class="rouge-code"><pre><span class="kd">const</span> <span class="nx">sortByName</span> <span class="o">=</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="k">return</span> <span class="nx">a</span><span class="p">.</span><span class="nx">name</span><span class="p">.</span><span class="nx">toLocaleLowerCase</span><span class="p">()</span> <span class="o"><</span> <span class="nx">b</span><span class="p">.</span><span class="nx">name</span><span class="p">.</span><span class="nx">toLocaleLowerCase</span><span class="p">()</span> <span class="p">?</span> <span class="o">-</span><span class="mi">1</span> <span class="p">:</span> <span class="mi">1</span><span class="p">;</span> <span class="p">};</span> <span class="kd">function</span> <span class="nx">Search</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">RefinementList</span> <span class="c1">// ...</span> <span class="na">sortBy</span><span class="p">=</span><span class="si">{</span><span class="nx">sortByName</span><span class="si">}</span> <span class="p">/></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="Function (TypeScript)" data-code="import type { RefinementListProps } from 'react-instantsearch'; const sortByName: RefinementListProps['sortBy'] = (a, b) => { return a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase() ? -1 : 1; }; function Search() { return ( <RefinementList // ... sortBy={sortByName} /> ); }" class="snippet-body hidden"> <div class="highlight"> <pre class="tsx tsx 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 </pre></td><td class="rouge-code"><pre><span class="k">import</span> <span class="kd">type</span> <span class="p">{</span> <span class="nx">RefinementListProps</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">sortByName</span><span class="p">:</span> <span class="nx">RefinementListProps</span><span class="p">[</span><span class="dl">'</span><span class="s1">sortBy</span><span class="dl">'</span><span class="p">]</span> <span class="o">=</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="k">return</span> <span class="nx">a</span><span class="p">.</span><span class="nx">name</span><span class="p">.</span><span class="nx">toLocaleLowerCase</span><span class="p">()</span> <span class="o"><</span> <span class="nx">b</span><span class="p">.</span><span class="nx">name</span><span class="p">.</span><span class="nx">toLocaleLowerCase</span><span class="p">()</span> <span class="p">?</span> <span class="o">-</span><span class="mi">1</span> <span class="p">:</span> <span class="mi">1</span><span class="p">;</span> <span class="p">};</span> <span class="kd">function</span> <span class="nx">Search</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">RefinementList</span> <span class="c1">// ...</span> <span class="na">sortBy</span><span class="p">=</span><span class="si">{</span><span class="nx">sortByName</span><span class="si">}</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> </td> </tr> <tr data-row-to-highlight class="border-none"> <td class="align-top scrollspy-sub-element" id="widget-param-escapefacetvalues"> <code> escapeFacetValues </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: boolean </span> </div> <div class="py-4 mr-8"> <span class="block label"> default: true </span> </div> <div class="py-4"> <span class="block label"> Optional </span> </div> </div> <p>Escapes the content of the facet values returned by Algolia.</p> <p>When using this parameter, the highlighting tags are always <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark" target="_blank" rel="noopener"><code class="highlighter-rouge">mark</code></a>.</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='<RefinementList // ... escapeFacetValues={false} /> ' 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 </pre></td><td class="rouge-code"><pre><span class="p"><</span><span class="nc">RefinementList</span> <span class="c1">// ...</span> <span class="na">escapeFacetValues</span><span class="p">=</span><span class="si">{</span><span class="kc">false</span><span class="si">}</span> <span class="p">/></span> </pre></td></tr></tbody></table></code></pre></div> </div> </div> </div></div> </div> </td> </tr> <tr data-row-to-highlight class="border-none"> <td class="align-top scrollspy-sub-element" id="widget-param-transformitems"> <code> transformItems </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: (items: object[], metadata: { results: SearchResults }) => object[] </span> </div> <div class="py-4"> <span class="block label"> Optional </span> </div> </div> <p>Receives the items and is called before displaying them. Should return a new array with the same shape as the original array. Useful for transforming, removing, or reordering items.</p> <p>In addition, the full <code class="highlighter-rouge">results</code> data is available, which includes all <a href="/doc/guides/building-search-ui/going-further/backend-search/in-depth/understanding-the-api-response/">regular response parameters</a>, as well as <a href="https://instantsearchjs.netlify.app/algoliasearch-helper-js/reference.html#query-parameters">parameters from the Algolia search helper</a> (for example <code class="highlighter-rouge">disjunctiveFacetsRefinements</code>).</p> </td> </tr> <tr class="align-top"> <td colspan="2"> <div> <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="JavaScript"> <span class="snippet-tab"> JavaScript </span> </button> <button class="snippet-tab-wrapper " data-target="snippet.tab" data-action="click->snippet#switch" data-switch-language="TypeScript"> <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="JavaScript" data-code="const transformItems = (items) => { return items.map((item) => ({ ...item, label: item.label.toUpperCase(), })); }; function Search() { return ( <RefinementList // ... transformItems={transformItems} /> ); }" 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 </pre></td><td class="rouge-code"><pre><span class="kd">const</span> <span class="nx">transformItems</span> <span class="o">=</span> <span class="p">(</span><span class="nx">items</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="k">return</span> <span class="nx">items</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">item</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span> <span class="p">...</span><span class="nx">item</span><span class="p">,</span> <span class="na">label</span><span class="p">:</span> <span class="nx">item</span><span class="p">.</span><span class="nx">label</span><span class="p">.</span><span class="nx">toUpperCase</span><span class="p">(),</span> <span class="p">}));</span> <span class="p">};</span> <span class="kd">function</span> <span class="nx">Search</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">RefinementList</span> <span class="c1">// ...</span> <span class="na">transformItems</span><span class="p">=</span><span class="si">{</span><span class="nx">transformItems</span><span class="si">}</span> <span class="p">/></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="TypeScript" data-code="import type { RefinementListProps } from 'react-instantsearch'; const transformItems: RefinementListProps['transformItems'] = (items) => { return items.map((item) => ({ ...item, label: item.label.toUpperCase(), })); }; function Search() { return ( <RefinementList // ... transformItems={transformItems} /> ); }" class="snippet-body hidden"> <div class="highlight"> <pre class="tsx tsx 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="kd">type</span> <span class="p">{</span> <span class="nx">RefinementListProps</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">transformItems</span><span class="p">:</span> <span class="nx">RefinementListProps</span><span class="p">[</span><span class="dl">'</span><span class="s1">transformItems</span><span class="dl">'</span><span class="p">]</span> <span class="o">=</span> <span class="p">(</span><span class="nx">items</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="k">return</span> <span class="nx">items</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">item</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span> <span class="p">...</span><span class="nx">item</span><span class="p">,</span> <span class="na">label</span><span class="p">:</span> <span class="nx">item</span><span class="p">.</span><span class="nx">label</span><span class="p">.</span><span class="nx">toUpperCase</span><span class="p">(),</span> <span class="p">}));</span> <span class="p">};</span> <span class="kd">function</span> <span class="nx">Search</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">RefinementList</span> <span class="c1">// ...</span> <span class="na">transformItems</span><span class="p">=</span><span class="si">{</span><span class="nx">transformItems</span><span class="si">}</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> </td> </tr> <tr data-row-to-highlight class="border-none"> <td class="align-top scrollspy-sub-element" id="widget-param-classnames"> <code> classNames </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: Partial<RefinementListClassNames> </span> </div> <div class="py-4"> <span class="block label"> Optional </span> </div> </div> <p>The <a href="/doc/guides/building-search-ui/widgets/customize-an-existing-widget/react/#style-your-widgets">CSS classes you can override</a> and pass to the widget’s elements. It’s useful to style widgets with class-based CSS frameworks like <a href="https://getbootstrap.com/">Bootstrap</a> or <a href="https://tailwindcss.com/">Tailwind CSS</a>.</p> <ul> <li><code class="highlighter-rouge">root</code>: The root element of the widget.</li> <li><code class="highlighter-rouge">noRefinementRoot</code>: The root element when there are no refinements.</li> <li><code class="highlighter-rouge">searchBox</code>: The search box element.</li> <li><code class="highlighter-rouge">noResults</code>: The root element of the widget when there are no results.</li> <li><code class="highlighter-rouge">list</code>: The list element.</li> <li><code class="highlighter-rouge">item</code>: Each item element.</li> <li><code class="highlighter-rouge">selectedItem</code>: Each selected item element.</li> <li><code class="highlighter-rouge">label</code>: The label of each item.</li> <li><code class="highlighter-rouge">checkbox</code>: The checkbox of each item.</li> <li><code class="highlighter-rouge">labelText</code>: The text element of each label.</li> <li><code class="highlighter-rouge">count</code>: The count of each item.</li> <li><code class="highlighter-rouge">showMore</code>: The “Show more” button.</li> <li><code class="highlighter-rouge">disabledShowMore</code>: The disabled “Show more” button.</li> </ul> </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='<RefinementList // ... classNames={{ root: 'MyCustomRefinementList', searchBox: 'MyCustomRefinementListSearchBox MyCustomRefinementListSearchBox--subclass', }} /> ' 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 </pre></td><td class="rouge-code"><pre><span class="p"><</span><span class="nc">RefinementList</span> <span class="c1">// ...</span> <span class="na">classNames</span><span class="p">=</span><span class="si">{</span><span class="p">{</span> <span class="na">root</span><span class="p">:</span> <span class="dl">'</span><span class="s1">MyCustomRefinementList</span><span class="dl">'</span><span class="p">,</span> <span class="na">searchBox</span><span class="p">:</span> <span class="dl">'</span><span class="s1">MyCustomRefinementListSearchBox MyCustomRefinementListSearchBox--subclass</span><span class="dl">'</span><span class="p">,</span> <span class="p">}</span><span class="si">}</span> <span class="p">/></span> </pre></td></tr></tbody></table></code></pre></div> </div> </div> </div></div> </div> </td> </tr> <tr data-row-to-highlight class="border-none"> <td class="align-top scrollspy-sub-element" id="widget-param-translations"> <code> translations </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: Partial<RefinementListTranslations> </span> </div> <div class="py-4"> <span class="block label"> Optional </span> </div> </div> <p>A dictionary of translations to customize the UI text and support internationalization.</p> <ul> <li><code class="highlighter-rouge">submitButtonTitle</code>: The submit button title of the search box.</li> <li><code class="highlighter-rouge">resetButtonTitle</code>: The reset button title search box.</li> <li><code class="highlighter-rouge">noResultsText</code>: The text to display when searching for facets returns no results.</li> <li><code class="highlighter-rouge">showMoreButtonText</code>: The text for the “Show more” button.</li> </ul> </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='<RefinementList // ... searchable showMore translations={{ submitButtonTitle: 'Submit', resetButtonTitle: 'Reset', noResultsText: 'No brands matching your query.', showMoreButtonText({ isShowingMore }) { return isShowingMore ? 'Show less brands' : 'Show more brands'; }, }} /> ' 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 </pre></td><td class="rouge-code"><pre><span class="p"><</span><span class="nc">RefinementList</span> <span class="c1">// ...</span> <span class="na">searchable</span> <span class="na">showMore</span> <span class="na">translations</span><span class="p">=</span><span class="si">{</span><span class="p">{</span> <span class="na">submitButtonTitle</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Submit</span><span class="dl">'</span><span class="p">,</span> <span class="na">resetButtonTitle</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Reset</span><span class="dl">'</span><span class="p">,</span> <span class="na">noResultsText</span><span class="p">:</span> <span class="dl">'</span><span class="s1">No brands matching your query.</span><span class="dl">'</span><span class="p">,</span> <span class="nx">showMoreButtonText</span><span class="p">({</span> <span class="nx">isShowingMore</span> <span class="p">})</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">isShowingMore</span> <span class="p">?</span> <span class="dl">'</span><span class="s1">Show less brands</span><span class="dl">'</span> <span class="p">:</span> <span class="dl">'</span><span class="s1">Show more brands</span><span class="dl">'</span><span class="p">;</span> <span class="p">},</span> <span class="p">}</span><span class="si">}</span> <span class="p">/></span> </pre></td></tr></tbody></table></code></pre></div> </div> </div> </div></div> </div> </td> </tr> <tr data-row-to-highlight class="border-none"> <td class="align-top scrollspy-sub-element" id="widget-param-props"> <code> ...props </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: React.ComponentProps<'div'> </span> </div> <div class="py-4"> <span class="block label"> Optional </span> </div> </div> <p>Any <code class="highlighter-rouge"><div></code> prop to forward to the root element of the widget.</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='<RefinementList // ... className="MyCustomRefinementList" title="My custom title" /> ' 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">RefinementList</span> <span class="c1">// ...</span> <span class="na">className</span><span class="p">=</span><span class="s">"MyCustomRefinementList"</span> <span class="na">title</span><span class="p">=</span><span class="s">"My custom title"</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"><RefinementList></code> widget with <code class="highlighter-rouge">useRefinementList()</code>. Hooks provide APIs to access the widget state and interact with InstantSearch.</p> <p>The <code class="highlighter-rouge">useRefinementList()</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 { useRefinementList } from 'react-instantsearch'; function CustomRefinementList(<a href="#hook-params">props</a>) { const { <a href="#hook-api-items">items</a>, <a href="#hook-api-hasexhaustiveitems">hasExhaustiveItems</a>, <a href="#hook-api-createurl">createURL</a>, <a href="#hook-api-refine">refine</a>, <a href="#hook-api-sendevent">sendEvent</a>, <a href="#hook-api-searchforitems">searchForItems</a>, <a href="#hook-api-isfromsearch">isFromSearch</a>, <a href="#hook-api-canrefine">canRefine</a>, <a href="#hook-api-cantoggleshowmore">canToggleShowMore</a>, <a href="#hook-api-isshowingmore">isShowingMore</a>, <a href="#hook-api-toggleshowmore">toggleShowMore</a>, } = useRefinementList(<a href="#hook-params">props</a>); return <>{/* <a href="#hook-example">Your JSX</a> */}</>; } </pre> </div> <p>Then, render the widget:</p> <div class="highlight"> <pre class="highlight"><CustomRefinementList {...<a href="#hook-params">props</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’t 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-attribute"> <code> attribute </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: string </span> </div> <div class="py-4"> <span class="block label"> Required </span> </div> </div> <p>The name of the attribute in the records.</p> <p>To avoid unexpected behavior, you can’t use the same <code class="highlighter-rouge">attribute</code> prop in a different type of widget.</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 refinementListApi = useRefinementList({ attribute: 'categories', }); " 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 </pre></td><td class="rouge-code"><pre><span class="kd">const</span> <span class="nx">refinementListApi</span> <span class="o">=</span> <span class="nx">useRefinementList</span><span class="p">({</span> <span class="na">attribute</span><span class="p">:</span> <span class="dl">'</span><span class="s1">categories</span><span class="dl">'</span><span class="p">,</span> <span class="p">});</span> </pre></td></tr></tbody></table></code></pre></div> </div> </div> </div></div> </div> </td> </tr> <tr data-row-to-highlight="" class="border-none"> <td class="align-top scrollspy-sub-element" id="hook-params-operator"> <code> operator </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: "and"|"or" </span> </div> <div class="py-4 mr-8"> <span class="block label"> default: "or" </span> </div> <div class="py-4"> <span class="block label"> Optional </span> </div> </div> <p>How the <a href="/doc/api-reference/api-parameters/filters/">filters</a> are combined.</p> <ul> <li><code class="highlighter-rouge">"or"</code>: apply an <code class="highlighter-rouge">OR</code> between all selected values.</li> <li><code class="highlighter-rouge">"and"</code>: apply an <code class="highlighter-rouge">AND</code> between all selected values.</li> </ul> </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 refinementListApi = useRefinementList({ // ... operator: 'and', }); " 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 </pre></td><td class="rouge-code"><pre><span class="kd">const</span> <span class="nx">refinementListApi</span> <span class="o">=</span> <span class="nx">useRefinementList</span><span class="p">({</span> <span class="c1">// ...</span> <span class="na">operator</span><span class="p">:</span> <span class="dl">'</span><span class="s1">and</span><span class="dl">'</span><span class="p">,</span> <span class="p">});</span> </pre></td></tr></tbody></table></code></pre></div> </div> </div> </div></div> </div> </td> </tr> <tr data-row-to-highlight="" class="border-none"> <td class="align-top scrollspy-sub-element" id="hook-params-limit"> <code> limit </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: number </span> </div> <div class="py-4 mr-8"> <span class="block label"> default: 10 </span> </div> <div class="py-4"> <span class="block label"> Optional </span> </div> </div> <p>How many facet values to retrieve.</p> <p>When you set <a href="#widget-param-showmore"><code class="highlighter-rouge">showMore</code></a> and <a href="#widget-param-showmorelimit"><code class="highlighter-rouge">showMoreLimit</code></a>, this is the number of facet values to display before clicking the <strong>Show more</strong> button.</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 refinementListApi = useRefinementList({ // ... limit: 5, }); " 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 </pre></td><td class="rouge-code"><pre><span class="kd">const</span> <span class="nx">refinementListApi</span> <span class="o">=</span> <span class="nx">useRefinementList</span><span class="p">({</span> <span class="c1">// ...</span> <span class="na">limit</span><span class="p">:</span> <span class="mi">5</span><span class="p">,</span> <span class="p">});</span> </pre></td></tr></tbody></table></code></pre></div> </div> </div> </div></div> </div> </td> </tr> <tr data-row-to-highlight="" class="border-none"> <td class="align-top scrollspy-sub-element" id="hook-params-showmore"> <code> showMore </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: boolean </span> </div> <div class="py-4 mr-8"> <span class="block label"> default: false </span> </div> <div class="py-4"> <span class="block label"> Optional </span> </div> </div> <p>Whether to display a button that expands the number of items.</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 refinementListApi = useRefinementList({ // ... showMore: 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 </pre></td><td class="rouge-code"><pre><span class="kd">const</span> <span class="nx">refinementListApi</span> <span class="o">=</span> <span class="nx">useRefinementList</span><span class="p">({</span> <span class="c1">// ...</span> <span class="na">showMore</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> <tr data-row-to-highlight="" class="border-none"> <td class="align-top scrollspy-sub-element" id="hook-params-showmorelimit"> <code> showMoreLimit </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: number </span> </div> <div class="py-4"> <span class="block label"> Optional </span> </div> </div> <p>The maximum number of items to display if the widget is showing more items.</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 refinementListApi = useRefinementList({ // ... showMoreLimit: 20, }); " 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 </pre></td><td class="rouge-code"><pre><span class="kd">const</span> <span class="nx">refinementListApi</span> <span class="o">=</span> <span class="nx">useRefinementList</span><span class="p">({</span> <span class="c1">// ...</span> <span class="na">showMoreLimit</span><span class="p">:</span> <span class="mi">20</span><span class="p">,</span> <span class="p">});</span> </pre></td></tr></tbody></table></code></pre></div> </div> </div> </div></div> </div> </td> </tr> <tr data-row-to-highlight="" class="border-none"> <td class="align-top scrollspy-sub-element" id="hook-params-sortby"> <code> sortBy </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: string[] | (a: FacetValue, b: FacetValue) => number </span> </div> <div class="py-4 mr-8"> <span class="block label"> default: ["isRefined", "count:desc", "name:asc"], or `facetOrdering` if set </span> </div> <div class="py-4"> <span class="block label"> Optional </span> </div> </div> <p>How to sort refinements. Must be one or more of the following strings:</p> <ul> <li><code class="highlighter-rouge">"count"</code> (same as <code class="highlighter-rouge">"count:desc"</code>)</li> <li><code class="highlighter-rouge">"count:asc"</code></li> <li><code class="highlighter-rouge">"count:desc"</code></li> <li><code class="highlighter-rouge">"name"</code> (same as <code class="highlighter-rouge">"name:asc"</code>)</li> <li><code class="highlighter-rouge">"name:asc"</code></li> <li><code class="highlighter-rouge">"name:desc"</code></li> <li><code class="highlighter-rouge">"isRefined"</code> (same as <code class="highlighter-rouge">"isRefined:asc"</code>)</li> <li><code class="highlighter-rouge">"isRefined:asc"</code></li> <li><code class="highlighter-rouge">"isRefined:desc"</code></li> </ul> <p>You can also use a sort function that behaves like the standard Javascript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Syntax" target="_blank" rel="noopener"><code class="highlighter-rouge">compareFunction</code></a>.</p> <p>When you don’t set this parameter, and you’ve set <code class="highlighter-rouge">facetOrdering</code> for this facet in <code class="highlighter-rouge">renderingContent</code>, facets are sorted using <code class="highlighter-rouge">facetOrdering</code> and use the default order as a fallback.</p> <p class="alert alert-info">In some situations, refined facet values might not be present in the data returned by Algolia.</p> </td> </tr> <tr class="align-top"> <td colspan="2"> <div> <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="String"> <span class="snippet-tab"> String </span> </button> <button class="snippet-tab-wrapper " data-target="snippet.tab" data-action="click->snippet#switch" data-switch-language="Function"> <span class="snippet-tab"> Function </span> </button> <button class="snippet-tab-wrapper " data-target="snippet.tab" data-action="click->snippet#switch" data-switch-language="Function (TypeScript)"> <span class="snippet-tab"> Function (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="String" data-code="const refinementListApi = useRefinementList({ // ... sortBy: ['count:desc', 'name:asc'], });" 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 </pre></td><td class="rouge-code"><pre><span class="kd">const</span> <span class="nx">refinementListApi</span> <span class="o">=</span> <span class="nx">useRefinementList</span><span class="p">({</span> <span class="c1">// ...</span> <span class="na">sortBy</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">count:desc</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">name:asc</span><span class="dl">'</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="Function" data-code="const sortByName = (a, b) => { return a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase() ? -1 : 1; }; function RefinementList() { const refinementListApi = useRefinementList({ // ... sortBy, }); return <>{/* Your JSX */}</>; }" class="snippet-body hidden"> <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 </pre></td><td class="rouge-code"><pre><span class="kd">const</span> <span class="nx">sortByName</span> <span class="o">=</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="k">return</span> <span class="nx">a</span><span class="p">.</span><span class="nx">name</span><span class="p">.</span><span class="nx">toLocaleLowerCase</span><span class="p">()</span> <span class="o"><</span> <span class="nx">b</span><span class="p">.</span><span class="nx">name</span><span class="p">.</span><span class="nx">toLocaleLowerCase</span><span class="p">()</span> <span class="p">?</span> <span class="o">-</span><span class="mi">1</span> <span class="p">:</span> <span class="mi">1</span><span class="p">;</span> <span class="p">};</span> <span class="kd">function</span> <span class="nx">RefinementList</span><span class="p">()</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">refinementListApi</span> <span class="o">=</span> <span class="nx">useRefinementList</span><span class="p">({</span> <span class="c1">// ...</span> <span class="nx">sortBy</span><span class="p">,</span> <span class="p">});</span> <span class="k">return</span> <span class="p"><></span><span class="si">{</span><span class="cm">/* Your JSX */</span><span class="si">}</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="Function (TypeScript)" data-code="import type { UseRefinementListProps } from 'react-instantsearch'; const sortByName: UseRefinementListProps['sortBy'] = (a, b) => { return a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase() ? -1 : 1; }; function RefinementList() { const refinementListApi = useRefinementList({ // ... sortBy, }); return <>{/* Your JSX */}</>; }" class="snippet-body hidden"> <div class="highlight"> <pre class="tsx tsx 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 </pre></td><td class="rouge-code"><pre><span class="k">import</span> <span class="kd">type</span> <span class="p">{</span> <span class="nx">UseRefinementListProps</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">sortByName</span><span class="p">:</span> <span class="nx">UseRefinementListProps</span><span class="p">[</span><span class="dl">'</span><span class="s1">sortBy</span><span class="dl">'</span><span class="p">]</span> <span class="o">=</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="k">return</span> <span class="nx">a</span><span class="p">.</span><span class="nx">name</span><span class="p">.</span><span class="nx">toLocaleLowerCase</span><span class="p">()</span> <span class="o"><</span> <span class="nx">b</span><span class="p">.</span><span class="nx">name</span><span class="p">.</span><span class="nx">toLocaleLowerCase</span><span class="p">()</span> <span class="p">?</span> <span class="o">-</span><span class="mi">1</span> <span class="p">:</span> <span class="mi">1</span><span class="p">;</span> <span class="p">};</span> <span class="kd">function</span> <span class="nx">RefinementList</span><span class="p">()</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">refinementListApi</span> <span class="o">=</span> <span class="nx">useRefinementList</span><span class="p">({</span> <span class="c1">// ...</span> <span class="nx">sortBy</span><span class="p">,</span> <span class="p">});</span> <span class="k">return</span> <span class="p"><></span><span class="si">{</span><span class="cm">/* Your JSX */</span><span class="si">}</span><span class="p"></>;</span> <span class="p">}</span> </pre></td></tr></tbody></table></code></pre> </div> </div> </div> </div> </div> </td> </tr> <tr data-row-to-highlight="" class="border-none"> <td class="align-top scrollspy-sub-element" id="hook-params-escapefacetvalues"> <code> escapeFacetValues </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: boolean </span> </div> <div class="py-4 mr-8"> <span class="block label"> default: true </span> </div> <div class="py-4"> <span class="block label"> Optional </span> </div> </div> <p>Escapes the content of the facet values returned by Algolia.</p> <p>When using this parameter, the highlighting tags are always <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark" target="_blank" rel="noopener"><code class="highlighter-rouge">mark</code></a>.</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 refinementListApi = useRefinementList({ // ... escapeFacetValues: false, }); " 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 </pre></td><td class="rouge-code"><pre><span class="kd">const</span> <span class="nx">refinementListApi</span> <span class="o">=</span> <span class="nx">useRefinementList</span><span class="p">({</span> <span class="c1">// ...</span> <span class="na">escapeFacetValues</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="p">});</span> </pre></td></tr></tbody></table></code></pre></div> </div> </div> </div></div> </div> </td> </tr> <tr data-row-to-highlight="" class="border-none"> <td class="align-top scrollspy-sub-element" id="hook-params-transformitems"> <code> transformItems </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: (items: object[], metadata: { results: SearchResults }) => object[] </span> </div> <div class="py-4"> <span class="block label"> Optional </span> </div> </div> <p>Receives the items and is called before displaying them. Should return a new array with the same shape as the original array. Useful for transforming, removing, or reordering items.</p> <p>In addition, the full <code class="highlighter-rouge">results</code> data is available, which includes all <a href="/doc/guides/building-search-ui/going-further/backend-search/in-depth/understanding-the-api-response/">regular response parameters</a>, as well as <a href="https://community.algolia.com/algoliasearch-helper-js/reference.html#query-parameters">parameters from the helper</a> (for example <code class="highlighter-rouge">disjunctiveFacetsRefinements</code>).</p> </td> </tr> <tr class="align-top"> <td colspan="2"> <div> <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="JavaScript"> <span class="snippet-tab"> JavaScript </span> </button> <button class="snippet-tab-wrapper " data-target="snippet.tab" data-action="click->snippet#switch" data-switch-language="TypeScript"> <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="JavaScript" data-code="const transformItems = (items) => { return items.map((item) => ({ ...item, label: item.label.toUpperCase(), })); }; function RefinementList() { const refinementListApi = useRefinementList({ // ... transformItems, }); return <>{/* Your JSX */}</>; }" 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 </pre></td><td class="rouge-code"><pre><span class="kd">const</span> <span class="nx">transformItems</span> <span class="o">=</span> <span class="p">(</span><span class="nx">items</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="k">return</span> <span class="nx">items</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">item</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span> <span class="p">...</span><span class="nx">item</span><span class="p">,</span> <span class="na">label</span><span class="p">:</span> <span class="nx">item</span><span class="p">.</span><span class="nx">label</span><span class="p">.</span><span class="nx">toUpperCase</span><span class="p">(),</span> <span class="p">}));</span> <span class="p">};</span> <span class="kd">function</span> <span class="nx">RefinementList</span><span class="p">()</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">refinementListApi</span> <span class="o">=</span> <span class="nx">useRefinementList</span><span class="p">({</span> <span class="c1">// ...</span> <span class="nx">transformItems</span><span class="p">,</span> <span class="p">});</span> <span class="k">return</span> <span class="p"><></span><span class="si">{</span><span class="cm">/* Your JSX */</span><span class="si">}</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="TypeScript" data-code="import type { UseRefinementListProps } from 'react-instantsearch'; const transformItems: UseRefinementListProps['transformItems'] = (items) => { return items.map((item) => ({ ...item, label: item.label.toUpperCase(), })); }; function RefinementList() { const refinementListApi = useRefinementList({ // ... transformItems, }); return <>{/* Your JSX */}</>; }" class="snippet-body hidden"> <div class="highlight"> <pre class="tsx tsx 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="kd">type</span> <span class="p">{</span> <span class="nx">UseRefinementListProps</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">transformItems</span><span class="p">:</span> <span class="nx">UseRefinementListProps</span><span class="p">[</span><span class="dl">'</span><span class="s1">transformItems</span><span class="dl">'</span><span class="p">]</span> <span class="o">=</span> <span class="p">(</span><span class="nx">items</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="k">return</span> <span class="nx">items</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">item</span><span class="p">)</span> <span class="o">=></span> <span class="p">({</span> <span class="p">...</span><span class="nx">item</span><span class="p">,</span> <span class="na">label</span><span class="p">:</span> <span class="nx">item</span><span class="p">.</span><span class="nx">label</span><span class="p">.</span><span class="nx">toUpperCase</span><span class="p">(),</span> <span class="p">}));</span> <span class="p">};</span> <span class="kd">function</span> <span class="nx">RefinementList</span><span class="p">()</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">refinementListApi</span> <span class="o">=</span> <span class="nx">useRefinementList</span><span class="p">({</span> <span class="c1">// ...</span> <span class="nx">transformItems</span><span class="p">,</span> <span class="p">});</span> <span class="k">return</span> <span class="p"><></span><span class="si">{</span><span class="cm">/* Your JSX */</span><span class="si">}</span><span class="p"></>;</span> <span class="p">}</span> </pre></td></tr></tbody></table></code></pre> </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=""> <td class="align-top scrollspy-sub-element" id="hook-api-items"> <code> items </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: RefinementListItem[] </span> </div> </div> <p>The list of filtering values returned by Algolia.</p> <div class="language-ts*typedef 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="typedef"> <span class="snippet-tab"> Type definition </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="typedef" data-code="type RefinementListItem = { /** * The value of the refinement list item. */ value: string; /** * Human-readable value of the refinement list item. */ label: string; /** * Human-readable value of the searched refinement list item. */ highlighted?: string; /** * Number of matched results after refinement is applied. */ count: number; /** * Indicates if the list item is refined. */ isRefined: boolean; }; " class="snippet-body "> <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 9 10 11 12 13 14 15 16 17 18 19 20 21 22 </pre></td><td class="rouge-code"><pre><span class="kd">type</span> <span class="nx">RefinementListItem</span> <span class="o">=</span> <span class="p">{</span> <span class="cm">/** * The value of the refinement list item. */</span> <span class="na">value</span><span class="p">:</span> <span class="kr">string</span><span class="p">;</span> <span class="cm">/** * Human-readable value of the refinement list item. */</span> <span class="nl">label</span><span class="p">:</span> <span class="kr">string</span><span class="p">;</span> <span class="cm">/** * Human-readable value of the searched refinement list item. */</span> <span class="nl">highlighted</span><span class="p">?:</span> <span class="kr">string</span><span class="p">;</span> <span class="cm">/** * Number of matched results after refinement is applied. */</span> <span class="nl">count</span><span class="p">:</span> <span class="kr">number</span><span class="p">;</span> <span class="cm">/** * Indicates if the list item is refined. */</span> <span class="nl">isRefined</span><span class="p">:</span> <span class="nx">boolean</span><span class="p">;</span> <span class="p">};</span> </pre></td></tr></tbody></table></code></pre></div> </div> </div> </div></div> </td> </tr> <tr data-row-to-highlight="" class=""> <td class="align-top scrollspy-sub-element" id="hook-api-hasexhaustiveitems"> <code> hasExhaustiveItems </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: boolean </span> </div> </div> <p>Whether the results are exhaustive.</p> </td> </tr> <tr data-row-to-highlight="" class=""> <td class="align-top scrollspy-sub-element" id="hook-api-createurl"> <code> createURL </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: (value: string) => string </span> </div> </div> <p>Creates the next state URL of a selected refinement.</p> </td> </tr> <tr data-row-to-highlight="" class=""> <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: string) => string </span> </div> </div> <p>Applies the selected refinement.</p> </td> </tr> <tr data-row-to-highlight="" class=""> <td class="align-top scrollspy-sub-element" id="hook-api-sendevent"> <code> sendEvent </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: (eventType: string, facetValue: string, eventName?: string) => void </span> </div> </div> <p>Sends an event to the Insights middleware.</p> </td> </tr> <tr data-row-to-highlight="" class=""> <td class="align-top scrollspy-sub-element" id="hook-api-searchforitems"> <code> searchForItems </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: (query: string) => void </span> </div> </div> <p>Searches for values in the list.</p> </td> </tr> <tr data-row-to-highlight="" class=""> <td class="align-top scrollspy-sub-element" id="hook-api-isfromsearch"> <code> isFromSearch </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: boolean </span> </div> </div> <p>Whether the values are from an index search.</p> </td> </tr> <tr data-row-to-highlight="" class=""> <td class="align-top scrollspy-sub-element" id="hook-api-canrefine"> <code> canRefine </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: boolean </span> </div> </div> <p>Whether a refinement can be applied.</p> </td> </tr> <tr data-row-to-highlight="" class=""> <td class="align-top scrollspy-sub-element" id="hook-api-cantoggleshowmore"> <code> canToggleShowMore </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: boolean </span> </div> </div> <p>Whether the <strong>Show more</strong> button can be activated, meaning there are enough additional items to display, or already displaying over the <a href="#hook-params-limit"><code class="highlighter-rouge">limit</code></a> items.</p> </td> </tr> <tr data-row-to-highlight="" class=""> <td class="align-top scrollspy-sub-element" id="hook-api-isshowingmore"> <code> isShowingMore </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: boolean </span> </div> </div> <p>Whether the menu is displaying all the menu items.</p> </td> </tr> <tr data-row-to-highlight="" class=""> <td class="align-top scrollspy-sub-element" id="hook-api-toggleshowmore"> <code> toggleShowMore </code> </td> <td class="align-top"> <div class="flex flex-wrap"> <div class="py-4 mr-8"> <span class="block label"> type: () => void </span> </div> </div> <p>Toggles the number of values displayed between <a href="#hook-params-limit"><code class="highlighter-rouge">limit</code></a> and <a href="#hook-params-showmorelimit"><code class="highlighter-rouge">showMoreLimit</code></a>.</p> </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 { useRefinementList } from 'react-instantsearch'; function CustomRefinementList(props) { const { items, refine, searchForItems, canToggleShowMore, isShowingMore, toggleShowMore, } = useRefinementList(props); return ( <> <input type="search" autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck={false} maxLength={512} onChange={(event) => searchForItems(event.currentTarget.value)} /> <ul> {items.map((item) => ( <li key={item.label}> <label> <input type="checkbox" checked={item.isRefined} onChange={() => refine(item.value)} /> <span>{item.label}</span> <span>({item.count})</span> </label> </li> ))} </ul> <button onClick={toggleShowMore} disabled={!canToggleShowMore}> {isShowingMore ? 'Show less' : 'Show more'} </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 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 </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">useRefinementList</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">CustomRefinementList</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span> <span class="kd">const</span> <span class="p">{</span> <span class="nx">items</span><span class="p">,</span> <span class="nx">refine</span><span class="p">,</span> <span class="nx">searchForItems</span><span class="p">,</span> <span class="nx">canToggleShowMore</span><span class="p">,</span> <span class="nx">isShowingMore</span><span class="p">,</span> <span class="nx">toggleShowMore</span><span class="p">,</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useRefinementList</span><span class="p">(</span><span class="nx">props</span><span class="p">);</span> <span class="k">return</span> <span class="p">(</span> <span class="p"><></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="p">=</span><span class="s">"search"</span> <span class="na">autoComplete</span><span class="p">=</span><span class="s">"off"</span> <span class="na">autoCorrect</span><span class="p">=</span><span class="s">"off"</span> <span class="na">autoCapitalize</span><span class="p">=</span><span class="s">"off"</span> <span class="na">spellCheck</span><span class="p">=</span><span class="si">{</span><span class="kc">false</span><span class="si">}</span> <span class="na">maxLength</span><span class="p">=</span><span class="si">{</span><span class="mi">512</span><span class="si">}</span> <span class="na">onChange</span><span class="p">=</span><span class="si">{</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="o">=></span> <span class="nx">searchForItems</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">currentTarget</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span><span class="si">}</span> <span class="p">/></span> <span class="p"><</span><span class="nt">ul</span><span class="p">></span> <span class="si">{</span><span class="nx">items</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">item</span><span class="p">)</span> <span class="o">=></span> <span class="p">(</span> <span class="p"><</span><span class="nt">li</span> <span class="na">key</span><span class="p">=</span><span class="si">{</span><span class="nx">item</span><span class="p">.</span><span class="nx">label</span><span class="si">}</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="p">=</span><span class="s">"checkbox"</span> <span class="na">checked</span><span class="p">=</span><span class="si">{</span><span class="nx">item</span><span class="p">.</span><span class="nx">isRefined</span><span class="si">}</span> <span class="na">onChange</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="nx">item</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span><span class="si">}</span> <span class="p">/></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span><span class="si">{</span><span class="nx">item</span><span class="p">.</span><span class="nx">label</span><span class="si">}</span><span class="p"></</span><span class="nt">span</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>(<span class="si">{</span><span class="nx">item</span><span class="p">.</span><span class="nx">count</span><span class="si">}</span>)<span class="p"></</span><span class="nt">span</span><span class="p">></span> <span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p">))</span><span class="si">}</span> <span class="p"></</span><span class="nt">ul</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="nx">toggleShowMore</span><span class="si">}</span> <span class="na">disabled</span><span class="p">=</span><span class="si">{</span><span class="o">!</span><span class="nx">canToggleShowMore</span><span class="si">}</span><span class="p">></span> <span class="si">{</span><span class="nx">isShowingMore</span> <span class="p">?</span> <span class="dl">'</span><span class="s1">Show less</span><span class="dl">'</span> <span class="p">:</span> <span class="dl">'</span><span class="s1">Show more</span><span class="dl">'</span><span class="si">}</span> <span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"></></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 { useRefinementList, UseRefinementListProps } from 'react-instantsearch'; function CustomRefinementList(props: UseRefinementListProps) { const { items, refine, searchForItems, canToggleShowMore, isShowingMore, toggleShowMore, } = useRefinementList(props); return ( <> <input type="search" autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck={false} maxLength={512} onChange={(event) => searchForItems(event.currentTarget.value)} /> <ul> {items.map((item) => ( <li key={item.label}> <label> <input type="checkbox" checked={item.isRefined} onChange={() => refine(item.value)} /> <span>{item.label}</span> <span> ({item.count})</span> </label> </li> ))} </ul> <button onClick={toggleShowMore} disabled={!canToggleShowMore}> {isShowingMore ? 'Show less' : 'Show more'} </button> </> ); }" class="snippet-body hidden"> <div class="highlight"> <pre class="tsx tsx 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 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 </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">useRefinementList</span><span class="p">,</span> <span class="nx">UseRefinementListProps</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">CustomRefinementList</span><span class="p">(</span><span class="nx">props</span><span class="p">:</span> <span class="nx">UseRefinementListProps</span><span class="p">)</span> <span class="p">{</span> <span class="kd">const</span> <span class="p">{</span> <span class="nx">items</span><span class="p">,</span> <span class="nx">refine</span><span class="p">,</span> <span class="nx">searchForItems</span><span class="p">,</span> <span class="nx">canToggleShowMore</span><span class="p">,</span> <span class="nx">isShowingMore</span><span class="p">,</span> <span class="nx">toggleShowMore</span><span class="p">,</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useRefinementList</span><span class="p">(</span><span class="nx">props</span><span class="p">);</span> <span class="k">return</span> <span class="p">(</span> <span class="p"><></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="p">=</span><span class="s">"search"</span> <span class="na">autoComplete</span><span class="p">=</span><span class="s">"off"</span> <span class="na">autoCorrect</span><span class="p">=</span><span class="s">"off"</span> <span class="na">autoCapitalize</span><span class="p">=</span><span class="s">"off"</span> <span class="na">spellCheck</span><span class="p">=</span><span class="si">{</span><span class="kc">false</span><span class="si">}</span> <span class="na">maxLength</span><span class="p">=</span><span class="si">{</span><span class="mi">512</span><span class="si">}</span> <span class="na">onChange</span><span class="p">=</span><span class="si">{</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="o">=></span> <span class="nx">searchForItems</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">currentTarget</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span><span class="si">}</span> <span class="p">/></span> <span class="p"><</span><span class="nt">ul</span><span class="p">></span> <span class="si">{</span><span class="nx">items</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">item</span><span class="p">)</span> <span class="o">=></span> <span class="p">(</span> <span class="p"><</span><span class="nt">li</span> <span class="na">key</span><span class="p">=</span><span class="si">{</span><span class="nx">item</span><span class="p">.</span><span class="nx">label</span><span class="si">}</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="p">=</span><span class="s">"checkbox"</span> <span class="na">checked</span><span class="p">=</span><span class="si">{</span><span class="nx">item</span><span class="p">.</span><span class="nx">isRefined</span><span class="si">}</span> <span class="na">onChange</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="nx">item</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span><span class="si">}</span> <span class="p">/></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span><span class="si">{</span><span class="nx">item</span><span class="p">.</span><span class="nx">label</span><span class="si">}</span><span class="p"></</span><span class="nt">span</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span> (<span class="si">{</span><span class="nx">item</span><span class="p">.</span><span class="nx">count</span><span class="si">}</span>)<span class="p"></</span><span class="nt">span</span><span class="p">></span> <span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p">))</span><span class="si">}</span> <span class="p"></</span><span class="nt">ul</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="nx">toggleShowMore</span><span class="si">}</span> <span class="na">disabled</span><span class="p">=</span><span class="si">{</span><span class="o">!</span><span class="nx">canToggleShowMore</span><span class="si">}</span><span class="p">></span> <span class="si">{</span><span class="nx">isShowingMore</span> <span class="p">?</span> <span class="dl">'</span><span class="s1">Show less</span><span class="dl">'</span> <span class="p">:</span> <span class="dl">'</span><span class="s1">Show more</span><span class="dl">'</span><span class="si">}</span> <span class="p"></</span><span class="nt">button</span><span class="p">></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> <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/refinement-list/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/refinement-list/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/refinement-list/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/refinement-list/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/refinement-list/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/refinement-list/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-attribute'> <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'> attribute </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='#widget-param-operator'> <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'> operator </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='#widget-param-limit'> <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'> limit </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='#widget-param-showmore'> <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'> showMore </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='#widget-param-showmorelimit'> <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'> showMoreLimit </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='#widget-param-searchable'> <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'> searchable </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='#widget-param-searchableplaceholder'> <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'> searchablePlaceholder </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='#widget-param-sortby'> <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'> sortBy </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='#widget-param-escapefacetvalues'> <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'> escapeFacetValues </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='#widget-param-transformitems'> <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'> transformItems </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='#widget-param-classnames'> <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'> classNames </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='#widget-param-translations'> <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'> translations </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='#widget-param-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> </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/refinement-list/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/refinement-list/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/refinement-list/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/refinement-list/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/refinement-list/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/refinement-list/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>