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

``sh
npm install @x4b/design-system


or


yarn add @x4b/design-system
`

- Install the banner package

`sh
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:

`html

`

Example

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

`javascript
function App() {
return (
<>





);
}

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

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

return (
{...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',
})}
/>
);
}
``