X4B Banner

This project provides a React component for the banner

It also includes a Provider and a hook to manage your App authentication.

Install

The library requires React>=16.8

• Install the peer dependencies

npm install @x4b/design-system
# or
yarn add @x4b/design-system

• Install the banner package

npm install @x4b/banner
# or
yarn add @x4b/banner

• Install the fonts

By default, the banner uses the open sans font. In the head of the HTML file, add the following code:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600&display=swap" />

Example

Wrap the Banner component inside an AuthProvider to use the X4B authentication. Here's a code example:

function App() {
    return (
        <>
            <AuthProvider appsServiceUrl="https://x4b.dev.xcomponent.com/apps">
                <AppContent />
            </AuthProvider>
            <GlobalStyle />
        </>
    );
}

function AppContent() {
    const [lang, setLang] = React.useState(() => getDefaultLanguage());
    const { getBannerProps, authResult } = useAuth();

    React.useEffect(() => {
        console.debug('token', authResult?.token);
    }, [authResult]);

    return (
        <Banner
            {...getBannerProps({
                application: 'scenario',
                notificationCount: 2,
                onNotificationClick: () => console.debug('notification button clicked'),
                onToggleMenuClick: isMenuOpen => console.debug(`Menu open: ${isMenuOpen}`),
                language: lang,
                languages: ['en', 'fr'],
                onLanguageChange: setLang,
                version: 'dev-test',
            })}
        />
    );
}