@thinkflagship/horizon-web-shorts
v1.0.10
Published
A React web SDK for integrating short-form video content with customizable UI components and video playback capabilities
Readme
@thinkflagship/horizon-web-shorts
A React web SDK for integrating short-form video content with customizable UI components and video playback capabilities.
⚠️ Important: This SDK is a client-side only component and requires client-side rendering.
Installation
Install the package using your preferred package manager:
npm install @thinkflagship/horizon-web-shortsyarn add @thinkflagship/horizon-web-shortspnpm add @thinkflagship/horizon-web-shortsImport CSS
import "@thinkflagship/horizon-web-shorts/styles.css";Setup
For Next.js (App Router)
- Create a client component wrapper (e.g.,
components/FlagshipProvider.tsx):
"use client";
import { FlagshipContainer } from "@thinkflagship/horizon-web-shorts";
import "@thinkflagship/horizon-web-shorts/styles.css";
export default function FlagshipProvider({
children,
}: {
children: React.ReactNode;
}) {
return (
<FlagshipContainer licenseKey="your-license-key">
{children}
</FlagshipContainer>
);
}- Use the wrapper in your layout or page:
// app/layout.tsx or app/page.tsx
import FlagshipProvider from "@/components/FlagshipProvider";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<FlagshipProvider>{children}</FlagshipProvider>
</body>
</html>
);
}- Use EntryPoints in your pages:
// app/page.tsx
"use client";
import {
EntryPoint,
EntryPointType,
EntryPointSize,
} from "@thinkflagship/horizon-web-shorts";
export default function Home() {
return (
<div>
<h1>Welcome to My App</h1>
<EntryPoint
id="your-entry-point-id"
skeletonType={EntryPointType.CIRCLE}
skeletonSize={EntryPointSize.STANDARD}
/>
</div>
);
}For Vite
Wrap your root file with FlagshipContainer (in src/App.tsx or src/main.tsx):
import {
FlagshipContainer,
EntryPoint,
} from "@thinkflagship/horizon-web-shorts";
import "@thinkflagship/horizon-web-shorts/styles.css";
function App() {
return (
<FlagshipContainer licenseKey="your-license-key">
<div className="app">
<h1>Welcome to My App</h1>
<EntryPoint
id="your-entry-point-id"
skeletonType={EntryPointType.CIRCLE}
skeletonSize={EntryPointSize.STANDARD}
/>
</div>
</FlagshipContainer>
);
}
export default App;Requirements
- React: 16.8.0 or higher
- React DOM: 16.8.0 or higher
- Node.js: 16.0.0 or higher
- Next.js: 13 or higher (16 in development)
API Reference
<FlagshipContainer>
Wrapper component required for all EntryPoints.
| Prop | Type | Required | Description |
| ------------ | ----------------- | -------- | ------------------------------------------------ |
| licenseKey | string | Yes | Your Flagship license key |
| platformId | string | No | Platform identifier (defaults to current domain) |
| children | React.ReactNode | Yes | Your application content |
<EntryPoint>
Renders entry points from Flagship Console.
| Prop | Type | Required | Description |
| -------------- | ---------------- | -------- | --------------------------- |
| id | string | Yes | Entry point ID from console |
| skeletonType | EntryPointType | No | Loading skeleton type |
| skeletonSize | EntryPointSize | No | Loading skeleton size |
EntryPointType: CIRCLE | RECTANGLE | BLOCK
EntryPointSize: COMPACT | STANDARD | BOLD | BLOCK_OF_2 | BLOCK_OF_4
Important Notes
- Next.js: Must use
'use client'directive (React hooks & browser APIs required) - FlagshipContainer: Required wrapper for all EntryPoints
- CSS: Import
@thinkflagship/horizon-web-shorts/styles.css - Entry Point IDs: Configure in Flagship Console before use
- platformId: platformId should exactly match with Console's App & website section.
Exposing Lenis on Window Object
If you use Lenis in your website for smooth scrolling, you should follow these steps to expose it on the window object for global access, debugging, and third-party integrations.
Type Declaration
Create or update globals.d.ts:
declare global {
interface Window {
lenis?: Lenis;
}
}Key Implementation Points
Expose lenis globally where lenis initialized:
// Expose lenis globally
window.lenis = lenis;Cleanup:
return () => {
lenis.destroy();
delete window.lenis;
};Complete Example
useEffect(() => {
const lenis = new Lenis({
duration: 0.5,
easing: (t) => 1 - Math.pow(1 - t, 3),
smoothWheel: true,
});
// Expose lenis globally
window.lenis = lenis;
lenis.on("scroll", ScrollTrigger.update);
function raf(time: number) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
return () => {
lenis.destroy();
delete window.lenis;
};
}, []);Benefits
- DevTools Debugging - Test scroll behavior in browser console
- Global Access - Control from any component without prop drilling
- Third-party Integration - Let external scripts interact with Lenis