PoweredBy

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 only use your free usage credits, or are on a Community or Free legacy plan.

Examples

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

<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>

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

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);

1
<CustomPoweredBy />