Flagship Web SDK

A React SDK for integrating Flagship entry points and shorts functionality into your web applications.

Installation

Install the package using npm or yarn:

npm install flagship-web-sdk

or

yarn add flagship-web-sdk

Peer Dependencies

Make sure you have the required peer dependencies installed:

npm install react react-dom

The SDK requires React 18.0.0 or higher.

CSS Styles

Import the required CSS styles in your application:

import 'flagship-web-sdk/dist/styles.css';

Quick Start

1. Wrap your application with FlagshipContainer

First, wrap your React application or the specific area where you want to use entry points with the FlagshipContainer component:

import React from 'react';
import { FlagshipContainer } from 'flagship-web-sdk';
import 'flagship-web-sdk/dist/styles.css';

function App() {
  return (
    <FlagshipContainer>
      {/* Your app content */}
      <YourMainComponent />
    </FlagshipContainer>
  );
}

export default App;

2. Use EntryPoint components

Inside the FlagshipContainer, you can now use EntryPoint components:

import React from 'react';
import { EntryPoint, EntryPointType } from 'flagship-web-sdk';

function YourMainComponent() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      
      {/* Basic entry point */}
      <EntryPoint id="your-entry-point-id" />
      
      {/* Entry point with skeleton type */}
      <EntryPoint 
        id="another-entry-point-id" 
        skeletonType={EntryPointType.CIRCLE} 
      />
    </div>
  );
}

API Reference

FlagshipContainer

A wrapper component that provides the necessary context and providers for the Flagship SDK to function properly.

Props:

• children: React.ReactNode - Your application content

Required: Yes, all EntryPoint components must be used inside a FlagshipContainer.

EntryPoint

A component that renders entry points configured in the Flagship Console.

Props:

| Prop | Type | Required | Description | |------|------|----------|-------------| | id | string | Yes | The entry point ID from Flagship Console | | skeletonType | EntryPointType | No | The skeleton type to show while loading |

EntryPointType (Enum)

Available skeleton types for entry points:

enum EntryPointType {
  CIRCLE = "CIRCLE",
  RECTANGLE = "RECTANGLE"
}

Usage Examples

Basic Implementation

import React from 'react';
import { FlagshipContainer, EntryPoint } from 'flagship-web-sdk';
import 'flagship-web-sdk/dist/styles.css';

function App() {
  return (
    <FlagshipContainer>
      <div className="my-app">
        <header>
          <h1>My Application</h1>
        </header>
        
        <main>
          {/* Entry point in the main content area */}
          <EntryPoint id="main-content-entry-point" />
          
          <div className="content">
            {/* Your existing content */}
          </div>
        </main>
        
        <aside>
          {/* Sidebar entry point with circle skeleton */}
          <EntryPoint 
            id="sidebar-entry-point" 
            skeletonType={EntryPointType.CIRCLE}
          />
        </aside>
      </div>
    </FlagshipContainer>
  );
}

export default App;

Multiple Entry Points

import React from 'react';
import { FlagshipContainer, EntryPoint, EntryPointType } from 'flagship-web-sdk';

function HomePage() {
  const entryPointIds = [
    'hero-section',
    'featured-content',
    'recommended-shorts'
  ];

  return (
    <FlagshipContainer>
      <div className="homepage">
        {entryPointIds.map((id, index) => (
          <EntryPoint 
            key={id}
            id={id}
            skeletonType={index % 2 === 0 ? EntryPointType.RECTANGLE : EntryPointType.CIRCLE}
          />
        ))}
      </div>
    </FlagshipContainer>
  );
}

Conditional Rendering

import React from 'react';
import { FlagshipContainer, EntryPoint, EntryPointType } from 'flagship-web-sdk';

function ConditionalEntryPoints({ showEntryPoints, userPreferences }) {
  return (
    <FlagshipContainer>
      <div className="app-content">
        <h1>My App</h1>
        
        {showEntryPoints && (
          <>
            <EntryPoint 
              id="primary-entry-point"
              skeletonType={EntryPointType.RECTANGLE}
            />
            
            {userPreferences.showSidebar && (
              <EntryPoint 
                id="sidebar-entry-point"
                skeletonType={EntryPointType.CIRCLE}
              />
            )}
          </>
        )}
      </div>
    </FlagshipContainer>
  );
}

Getting Entry Point IDs

To get entry point IDs:

1. Log in to the Flagship Console
2. Navigate to your project
3. Go to the Entry Points section
4. Create or select an existing entry point
5. Copy the entry point ID from the configuration panel

Requirements

• React: 18.0.0 or higher
• React DOM: 18.0.0 or higher
• Node.js: 16.0.0 or higher (for development)

Important Notes

1. FlagshipContainer is Required: All EntryPoint components must be wrapped within a FlagshipContainer. The SDK will not work without this wrapper.

2. Client-Side Only: The SDK is designed for client-side rendering and will not render on the server side.

3. CSS Import: Don't forget to import the CSS styles for proper component styling.

4. Entry Point Configuration: Entry points must be properly configured in the Flagship Console before they can be used in your application.

Troubleshooting

Entry Point Not Displaying

• Verify that the entry point ID exists in Flagship Console
• Ensure the entry point is enabled in the console
• Check that FlagshipContainer wraps your EntryPoint components
• Verify that CSS styles are imported

Console Errors

• Make sure React and React DOM versions meet the minimum requirements
• Ensure all peer dependencies are installed
• Check that the entry point ID is a valid string

Support

For support and questions, please refer to the Flagship documentation or contact the development team.

License

ISC