2⃣
Select Widget Variants
LI.FI Widget comes in three variants - standard, expandable, and drawer.
The standard variant allows you to integrate the widget wherever you want on your web app's page and has everything you need to bridge and swap in a compact view.
The expandable variant provides a more comprehensive overview of available routes, displayed in a sidebar with slick animation.
The drawer variant can fit nicely on the page's side and has the same layout as the standard one.
Standard
Expandable
Drawer
To use one of the variants, set the
variant option in the configuration.import { LiFiWidget, WidgetConfig } from '@lifi/widget';
import { useMemo } from 'react';
const widgetConfig: WidgetConfig = {
// It can be either standard, expandable, or drawer
variant: 'expandable',
};
export const WidgetPage = () => {
return <LiFiWidget config={widgetConfig} />;
};