Optiversal UI Components

This package contains the Optiversal UI components.

Installation

npm install @optiversal/components

Usage

The OptiversalRelatedLinks component is built with React component and is compatible with client or server rendering. It takes the following options:

{
  orgId = 'Your Optiversal ID',
  loadingMessage = 'Loading...', // Optional message to display while loading.
  max = 5, // Maximum number of links to display. 
  liClass = 'opt-related-li', // CSS class for the renderded <li> elements.
  ulClass = 'opt-related-ul', // CSS class for the rendered <ul> element.
  aClass = 'opt-related-a',   // CSS class for the rendered <a> elements.
  query = '', // the topic, SKU, or family ID
  queryType = 'random' | 'topic' | 'sku' | 'family', // desired search strategy
  exclude = [], // array of SKU or family IDs to exclude. 
  pageTypes = [], // array of page types to include ('pdp', 'plp', 'opt').
}

These options mirror the options available in the Optiversal Related Links API. See the Optiversal API documentation for more information.

Example usage for a 'topic' query:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { OptiversalRelatedLinks } from '@optiversal/components';

const rootEl = document.getElementById('root');

if (rootEl) {
  ReactDOM.createRoot(rootEl).render(
    <React.StrictMode>
      <OptiversalRelatedLinks
        orgId="{YOUR OPTIVERSAL ID HERE}"
        query="YOUR TOPIC"
        queryType="topic"
      />
    </React.StrictMode>
  );
}