THIS IS ARCHIVED DOCUMENTATION

Tab (Deprecated)

The Tab headless controller allows the end user to view a subset of results. It is in charge of adding a constant expression to the outgoing query in order to refine the results.

Methods

select

Activates the tab.

subscribe

Adds a callback that’s invoked on state change.

Parameters

  • listener: () ⇒ void

    A callback that’s invoked on state change.

Returns Unsubscribe: A function to remove the listener.

Attributes

state

The state of the Tab controller.

Properties

  • isActive: boolean

    true if the current tab is selected and false otherwise.

Initialize

buildTab

Creates a Tab controller instance.

Parameters

  • engine: SearchEngine

    The headless engine.

  • props: TabProps

    The configurable Tab properties.

Returns Tab

TabProps

The configurable Tab properties.

Properties

  • options: TabOptions

    The options for the Tab controller.

  • initialState?: TabInitialState

    The initial state that should be applied to this Tab controller.

TabOptions

The options for the Tab controller.

Properties

  • expression: string

    A constant query expression or filter that the Tab should add to any outgoing query.

    Example:

    @objecttype==Message

  • id: string

    A unique identifier for the tab. The value will be used as the originLevel2 when the tab is active.

TabInitialState

The initial state that should be applied to this Tab controller.

Properties

  • isActive: boolean

    Specifies if the tab is currently selected. Note that there can be only one active tab for a given headless engine.

Unsubscribe

Call signatures

  • (): void

Example Implementation

tab.fn.tsx

import {useEffect, useState, FunctionComponent} from 'react';
import {Tab as HeadlessTab} from '@coveo/headless';
 
interface TabProps {
  controller: HeadlessTab;
}
 
export const Tab: FunctionComponent<TabProps> = (props) => {
  const {controller} = props;
  const [state, setState] = useState(controller.state);
 
  useEffect(() => controller.subscribe(() => setState(controller.state)), []);
 
  return (
    <button disabled={state.isActive} onClick={() => controller.select()}>
      {props.children}
    </button>
  );
};
 
// usage
 
/**
 * ```tsx
 * const controller = buildTab(engine, {
 *   initialState: {isActive: true},
 *   options: {
 *     id: 'messages',
 *     expression: '@objecttype==Message',
 *   },
 * });
 *
 * <Tab controller={controller}>Messages</Tab>;
 * ```
 */

Associated Engines

The Tab controller is available in the following engine: