API Reference / React InstantSearch Hooks / <PoweredBy>

<PoweredBy>

Signature 
<PoweredBy
  // Optional props
  theme={'light'|'dark'}
  classNames={Partial<PoweredByClassNames>}
  ...props={React.ComponentProps<'div'>}
/>
See code examples
See live example

About this widget

<PoweredBy> is a widget that lets you display the Algolia logo to redirect to the Algolia website.

Algolia requires that you display a “Search by Algolia” logo with a link if you only use your free usage credits, or are on a Community or Free legacy plan.

You can also create your own UI with usePoweredBy().

Examples

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13

import React from 'react';
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, PoweredBy } from 'react-instantsearch-hooks-web';

const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');

function App() {
  return (
    <InstantSearch indexName="instant_search" searchClient={searchClient}>
      <PoweredBy />
    </InstantSearch>
  );
}

Props

theme
type: 'light'|'dark'
default: 'light'
Optional

The version of the logo to use, legible on light or dark backgrounds.
Copy 
1

<PoweredBy theme="dark" />
classNames
type: Partial<PoweredByClassNames>
Optional

CSS classes to pass to the widget’s elements. This is useful to style widgets with class-based CSS frameworks like Bootstrap or Tailwind CSS.

  • root: The root element of the widget.
  • light: The root element of the widget with the light theme.
  • dark: The root element of the widget with the dark theme.
  • link: The link element.
  • logo: The SVG logo.
Copy 
1
2
3
4
5
6

<PoweredBy
  classNames={{
    root: 'MyCustomPoweredBy',
    link: 'MyCustomPoweredByLink MyCustomPoweredByLink--subclass',
  }}
/>
...props
type: React.ComponentProps<'div'>
Optional

Any <div> prop to forward to the root element of the widget.
Copy 
1

<PoweredBy className="MyCustomPoweredBy" title="My custom title" />

Hook

React InstantSearch Hooks let you create your own UI for the <PoweredBy> widget with usePoweredBy(). Hooks provide APIs to access the widget state and interact with InstantSearch.

The usePoweredBy() Hook returns APIs.

See code examples

Usage

First, create your React component:

function CustomPoweredBy() {
  const { url } = usePoweredBy();

  return <>{/* Your JSX */}</>;
}

Then, render the widget:

<CustomPoweredBy />

APIs

Hooks return APIs, such as state and functions. You can use them to build your UI and interact with React InstantSearch.

url
type: string

The URL to redirect to.

Example

Copy 
1
2
3
4
5
6
7
8
9
10
11

import React from 'react';
import { usePoweredBy } from 'react-instantsearch-hooks-web';

function CustomPoweredBy() {
  const { url } = usePoweredBy();

  // You can download the "Search by Algolia" logo for light and dark themes.
  // https://www.algolia.com/press/?section=brand-guidelines

  return <>{/* Your JSX */}</>;
}
Did you find this page helpful?
React InstantSearch Hooks v6