Update Page Title To Include Search Query

📘

Components:

  • components/search/Query/index.ts

In the following example, you can see how you can interact with page elements outside of Findify's components and modify your search results page title to include a search query.

/**
 * @module components/search/Query
 */

import React from 'react';
import { connectQuery } from '@findify/react-connect';
import { compose, setDisplayName, withProps } from 'recompose';
import withTheme from 'helpers/withTheme';

import view from 'components/search/Query/view';
import styles from 'components/search/Query/styles.css';
import { lifecycle } from 'recompose';

// define default page title
const defaultTitle = document.title;

const updateQuery = query => {
  // define search query
  const q = query.get('q');
  // display either the default title including queries on your search page or the default title only
  const titleText = q && q.length > 0
    ? `${defaultTitle} | ${q}`
        : defaultTitle;
  
  document.title = titleText;
}

export default compose(
  setDisplayName('Query'),
  withTheme(styles),
  connectQuery,
  // use lifecycle to update the page title
  lifecycle({
    componentDidUpdate() {
      updateQuery(this.props.query);
    }
  })
)(view);