React Banner Component for X4B
This project provides a React component for the banner
It also includes a Provider and a hook to manage your App authentication.
The library requires React>=16.8
- Install the peer dependencies
``sh`
npm install @x4b/design-systemor
yarn add @x4b/design-system
- Install the banner package
`sh`
npm install @x4b/banneror
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`
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 (
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',
})}
/>
);
}