@bookassist/ba-header v0.0.9-rc19

Bookassist Header

This project is React Control that renders common Bookassist header. You can import this project to use into another react project or non-react project.

Build library

This project is also a library to use embedded in another apps. The library exports 2 things

• Header: This is the React component
• renderHeader: This is a function to render the header in anywhere.application.

To build the library you can execute

yarn install && yarn build

Publish library

You can publish this library to a npm repository. npm publish

How to use

You can use this library as part of es6 project as library and component into this project.

es6

To install the component, you have to include in your project as

npm install @bookassist/ba-js-header

To use into you project

import { Header } from '@bookassist/ba-js-header'
... 
<Header />

Another js project or website

You have to include the js file

<link rel="stylesheet" href="https://unpkg.com/@bookassist/ba-styles@0.0.13/dist/ha-styles.css">
<script type="text/javascript" src="https://unpkg.com/@bookassist/ba-header@0.0.9-rc18/dist/ba-header.js"></script>

...

<div id="header"></div>
<script type="text/javascript">
  renderHeader(document.getElementById("header"))
</script>

Options

Properties of the control

There are some properties you can configure to change the behaviour and adapt to your needdeds.

All these properties are avaible for the control and the function. Control

<Header title={ 'My Application' } />

function

renderHeader(document.getElementById("header"), { title: 'My Application' }})

Logo Configuration

As part of the properties of the header, you can set the configuration of the logo. This configuration is an object where you can set some properties.

Menu Configuration

The menu can be configured using children of the Header control or as property in the options. In case, you want to use as propety in the options, you have to fill the property menuItems with and array of objects with following properties.

Menu only allows 2 levels of items.

Menu with child items is only available on Control not as function. You can see more details on Menu and Breadcrumb.

Callbacks or notification functions

There are some events that the header produces

All these events are avaible for the control and the function. Control

<Header onLogout={ () => console.log('bye') } />

function

renderHeader(document.getElementById("header"), { onLogout: function() { console.log('bye') }})

Menu and Breadcrumb

The header can contains a menu and a breadcrumb. You can add them only in es6 format as children objects.

<Header>
  <Breadcrumb>
    <BreadcrumbItem name={'Home'}>
    <BreadcrumbItem name={'Vouchers'}>
  </Breadcrumb>
  <Menu
    id={'m_hotelinfo'}
    url={'https://test.bookassist.com/hotelinfo.jsp'}
    title={ 'Hotel Info' }
    selected
  >
    <MenuItem
      id={'mi_vou'}
      url={'https://test.bookassist.com/voucher.jsp'}
      text={ 'Vouchers' }
    />
    <MenuItem
      id={'mi_reviews'}
      url={'https://test.bookassist.com/review.jsp'}
      text={'Reviews'}
    />
  </Menu>
  <Menu
    id={ 'm_help' }
    url={ 'https://test.bookassit.com/help' }
    title={ 'help' }
  >
</Header>

Options

This library can be configured at global level to change the behaviour of the component. You can create a new global object called bookassist.header.config that can contain an object like

{
  "checkConfig": true,
  "api": {
    "server": "https://api.bookassist.com",
    "endpoints": {
      "i18n": "/iface/i18n",
      "hotel": "/iface/hotel",
      "group": "/sso/admin/group",
      "user": "/iface/user"
    }
  }
}