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);
Updated over 4 years ago