ZangoApp Reference

ZangoApp is the root component of your frontend. It lives in src/App.tsx and wraps everything — routing, auth, navbar, theme.

import { ZangoApp } from '@zango-core/crm-framework';
import * as customPages from './custom/pages';

const App = () => (
  <ZangoApp
    appInitializerEndpoint="/appbuilder/initializer/"
    customPages={customPages}
  />
);

Core Props

Prop	Type	Required	Description
appInitializerEndpoint	string	Yes	API endpoint that returns routes, menus, and theme. Default: /appbuilder/initializer/
customPages	object	Yes	Map of component names → React components. Import from ./custom/pages

Layout Props

Prop	Type	Default	Description
layoutConfig.showTopbar	boolean	true	Show/hide the top bar
layoutConfig.showNavbar	boolean	true	Show/hide the sidebar
layoutConfig.layoutType	string	'default'	Layout variant ('default' or 'wide')

Navbar Props (navbarConfig)

Prop	Type	Description
showLogo	boolean	Show/hide logo at top of sidebar
showMenu	boolean	Show/hide menu items
isCollapsed	boolean	Start sidebar collapsed
collapsible	boolean	Allow user to toggle collapse
customLogo	ReactNode	Replace default logo
customMenu	ReactNode	Replace entire menu
customMenuContent	ReactNode	Append content below menu items
customBottomContent	ReactNode	Sticky content pinned to bottom of sidebar
customNavbar	ComponentType	Replace the entire navbar component

Topbar Props (topbarConfig)

Prop	Type	Description
showProfile	boolean	Show profile dropdown
customLeftContent	ReactNode	Custom content on the left
customRightContent	ReactNode	Custom content on the right (before profile)
customProfileMenu	ReactNode	Replace profile dropdown content
customTopbar	ComponentType	Replace entire topbar

Auth Props (authConfig)

See Auth Customisation for full details.

Key	Description
theme	Background, primaryColor, fonts, borderRadius
logo	Logo URL, width, height
card	Card borderRadius, boxShadow, padding
login	Title, subtitle, button text, tab config
roleSelection	Role selection page text and layout
twoFactor	2FA page text and OTP config
resetPassword	Forgot password and reset form text
providers	OAuth provider button config
customComponents	Replace LoginPage, LoginCard, RoleSelection, TwoFactorAuth, etc.

useAppContext Hook

Access app data from any component inside ZangoApp:

import { useAppContext } from '@zango-core/crm-framework';

const MyComponent = () => {
  const {
    appData,       // Raw initializer response
    menu,          // Navigation menu items for current role
    routes,        // Application routes
    profileInfo,   // Current user: name, email, role, etc.
    appLogo,       // App logo URL
    appName,       // Application name
    theme,         // Theme colours and typography
  } = useAppContext();

  return <div>Hello, {profileInfo?.name}</div>;
};

Custom Navbar Example

import { ZangoApp } from '@zango-core/crm-framework';
import * as customPages from './custom/pages';

const MyLogo = () => (
  <div style={{ padding: '16px 20px', display: 'flex', alignItems: 'center', gap: 10 }}>
    <img src="/logo.svg" width={28} />
    <span style={{ fontWeight: 700 }}>MyApp</span>
  </div>
);

const App = () => (
  <ZangoApp
    appInitializerEndpoint="/appbuilder/initializer/"
    customPages={customPages}
    navbarConfig={{
      collapsible: true,
      customLogo: <MyLogo />,
    }}
    topbarConfig={{
      showProfile: true,
      customRightContent: <NotificationBell />,
    }}
    layoutConfig={{
      showTopbar: true,
      showNavbar: true,
    }}
  />
);