@financial-times/x-topic-search

x-topic-search

This module allows a user to search for topics by name, and follow them. If an already-followed topic is returned in the search results, then those topics are indicated as such.

The search results are fetched from the api whose url is passed as a property. next-myft-page uses next-tag-facets-api.

Installation

This module is compatible with Node 6+ and is distributed on npm.

npm install --save @financial-times/x-topic-search

The x-engine module is used to inject your chosen runtime into the component. Please read the x-engine documentation first if you are consuming x- components for the first time in your application.

Usage

The components provided by this module are all functions that expect a map of properties. They can be used with vanilla JavaScript or JSX (If you are not familiar check out WTF is JSX first). For example if you were writing your application using React you could use the component like this:

import React from 'react';
import { TopicSearch } from '@financial-times/x-topic-search';

// A == B == C
const a = TopicSearch(props);
const b = <TopicSearch {...props} />;
const c = React.createElement(TopicSearch, props);

All x- components are designed to be compatible with a variety of runtimes, not just React. Check out the x-engine documentation for a list of recommended libraries and frameworks.

The consumer of this component needs to update followedTopicIds every time when users follow or unfollow topics.

Properties

Property	Type	Required	Note
minSearchLength	Number	No	Minimum chars to start search. Default is 2
maxSuggestions	Number	No	Maximum number to display suggestions. Default is 5
apiUrl	String	Yes	The url to use when making requests to get topics
followedTopicIds	Array	Yes	Array of followed topic ids.
csrfToken	String	Yes	Value included in a hidden form field for x-follow-button
renderFollowButton	Function	No	Optional render prop for the follow button