API Reference / React InstantSearch Widgets / PoweredBy
Apr. 11, 2019
Widget signature
<PoweredBy
  // Optional parameters
  translations={object}
/>

About this widget

The poweredBy widget is used to display the Algolia logo to redirect to our website.

Algolia requires that you use this widget if you are on a Community or Free plan.

Examples

1
2
3
import { PoweredBy } from 'react-instantsearch-dom';

<PoweredBy />

Props

translations
type: object
Optional

A mapping of keys to translation values.

  • searchBy: the label for the widget displayed before the Algolia logo.
1
2
3
4
5
<PoweredBy
  translations={{
    searchBy: 'Search by',
  }}
/>

Customize the UI - connectPoweredBy

If you want to create your own UI of the PoweredBy widget or use another UI library, you can use connectors.

Connectors are higher-order components. They encapsulate the logic for a specific kind of widget and they provide a way to interact with the InstantSearch context.

They have an outer component API that we call exposed props, and they provide some other props to the wrapped components which are called the provided props.

It’s a 3-step process:

// 1. Create a React component
const PoweredBy = () => {
  // return the DOM output
};

// 2. Connect the component using the connector
const CustomPoweredBy = connectPoweredBy(PoweredBy);

// 3. Use your connected widget
<CustomPoweredBy />

Create a React component

const PoweredBy = ({ string url }) => {
  // return the DOM output
};

Provided Props

url
type: string

The URL to redirect to Algolia.

1
const PoweredBy = ({ url }) => <a href={url}>Link to Algolia</a>;

Create and instantiate your connected widget

<CustomPoweredBy />

Full example

1
2
3
4
5
import { connectPoweredBy } from 'react-instantsearch-dom';

const PoweredBy = ({ url }) => <a href={url}>Link to Algolia</a>;

const CustomPoweredBy = connectPoweredBy(PoweredBy);

HTML output

1
2
3
4
5
6
<div class="ais-PoweredBy">
   <span class="ais-PoweredBy-text">Search by</span>
   <a href="..." class="ais-PoweredBy-link" aria-label="Algolia">
      <!-- <svg> ... </svg> -->
   </a>
</div>

Did you find this page helpful?