API Reference / React InstantSearch Widgets / ScrollTo
Apr. 24, 2019

ScrollTo

Widget signature 
<ScrollTo
  // Optional parameters
  scrollOn={string}
/>
See code examples
See Live example

About this widget

The ScrollTo widget makes the page scroll to the component wrapped by it when the searchState is updated. By default when the page number changes, the scroll goes to the wrapped component.

Examples

Copy
1
2
3
4
5

import { ScrollTo, Hits } from 'react-instantsearch-dom';

<ScrollTo>
  <Hits />
</ScrollTo>

Props

scrollOn
type: string
default: page
Optional

The widget state key to listen for changes. See the list of available keys by reading how the searchState is structured.
Copy
1
2
3

<ScrollTo scrollOn="query">
  <Hits/>
</ScrollTo>

Customize the UI - connectScrollTo

If you want to create your own UI of the ScrollTo 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
class ScrollTo extends Component {
  render() {
    // return the DOM output
  }
}

// 2. Connect the component using the connector
const CustomScrollTo = connectScrollTo(ScrollTo);

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

See code examples

Create a React component

class ScrollTo extends Component {
  render() {
    const {
      any value,
      boolean hasNotChanged,
    } = this.props;

    // return the DOM output
  }
}

Provided Props

value
type: any

The current refinement applied to the widget that is listened to.
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

class ScrollTo extends Component {
  componentDidUpdate(prevProps) {
    const { value, hasNotChanged } = this.props;

    if (value !== prevProps.value && hasNotChanged) {
      this.el.scrollIntoView();
    }
  }

  render() {
    return (
      <div ref={ref => (this.el = ref)}>
        {this.props.children}
      </div>
    );
  }
}
hasNotChanged
type: boolean

Whether the refinement came from the scrollOn parameter (for instance, page by default).
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

class ScrollTo extends Component {
  componentDidUpdate(prevProps) {
    const { value, hasNotChanged } = this.props;

    if (value !== prevProps.value && hasNotChanged) {
      this.el.scrollIntoView();
    }
  }

  render() {
    return (
      <div ref={ref => (this.el = ref)}>
        {this.props.children}
      </div>
    );
  }
}

Create and instantiate your connected widget

const CustomScrollTo = connectScrollTo(ScrollTo);

<CustomScrollTo
  // Optional params
  scrollOn={string}
/>

Exposed Props

scrollOn
type: string
default: page
Optional

The widget state key to listen for changes. See the list of available keys by reading how the searchState is structured.
Copy
1

<CustomScrollTo scrollOn="query" />

Full example

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import { connectScrollTo } from 'react-instantsearch-dom';

class ScrollTo extends Component {
  componentDidUpdate(prevProps) {
    const { value, hasNotChanged } = this.props;

    if (value !== prevProps.value && hasNotChanged) {
      this.el.scrollIntoView();
    }
  }

  render() {
    return (
      <div ref={ref => (this.el = ref)}>
        {this.props.children}
      </div>
    );
  }
}

const CustomScrollTo = connectScrollTo(ScrollTo);

Did you find this page helpful?

React InstantSearch v5