Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
ba-js-common-header
Advanced tools
A React-based shared header component
yarn add ba-js-common-header
// React
import { Header } from 'ba-js-common-header/dist/ba-js-common-header.es.js'
function App(props) {
return <Header {...props} />
}
// website
<div id="header"></div>
// es5
<script src="https://unpkg.com/ba-js-common-header/dist/ba-js-common-header.umd.js"></script>
// baJsHeader global now available
<script>
const { renderHeader } = baJsHeader
renderHeader(document.querySelector('#header'), {
// props
})
</script>
// ES Modules
<script type="module">
import { renderHeader } from 'https://unpkg.com/ba-js-common-header/dist/ba-js-common-header.es.js'
renderHeader(document.querySelector('#header'), {
// props
})
</script>
Prop | Type | Description | Required |
---|---|---|---|
config | url | header configuration feed endpoint | Yes |
userInfo | obj | userInfo object | Yes |
userLanguage | str | default user language | No |
handleLanguageChange | fn | language selector callback | No |
handleHotelChange | fn | hotel selector callback | No |
i18nFeed | url | Jed i18n endpoint | No |
The header configuration feed endpoint. See below for structure
The user state
{
username, // string (required)
hotelId, // integer (optional)
guideId, // integer (optional)
group, // string (optional)
}
The username is used by the header for display purposes. The hotel and guide ids are to provide for an initially selected hotel
The initially selected language, provided as an ISO language code (defaults to 'en')
Callback fired on selection of a language. The callback is passed the new language code
const cb = code => {
console.log(`The new language code is ${code}`)
}
Callback fired on selection of a hotel. The callback is passed an object containing name, hotel id and guide id
const cb = ({ name, hotelId, guideId }) => {
console.log({ name, hotelId, guideId })
}
Endpoint for Jed-based i18n feed. The url may contain a '{0}' placeholder for the current language code
const i18nFeed =
'https://www.bookassist.com/rest/api/v1/i18n/jed/bookassist.i18n.HotelAdminRB/{0}'
The config feed is an object with 2 required properties:
const config = {
titleBar, // required object
menuBar, // required array
}
The titleBar
property provides configuration details for the 6 available widgets in the upper half of the header (a given widget will be rendered if configuration for it exists). The property value is an object with 6 possible properties:
{
help, // optional object
languageSelector, // optional object
notifications, // optional object
product, // required object
propertySelector, // optional object
user, // required object
}
The help
property provides link information for the help widget. The property value is an object with 2 required properties:
{
label: 'Help Center', // required string
href: 'https://go.bookassist.org/en/knowledge/booking-engine', // required string
}
The languageSelector
property provides a language widget label and an array of available languages. The property value is an object with 2 required properties:
{
label: 'Language', // required string
children: [ // required array
{
code: 'en', // required string
},
{
code: 'es', // required string
label: 'Español', // optional string
},
{
code: 'fr', // required string
},
// ...
],
}
The children
array is a list of language
objects. A language
object consists of a required language code property and an optional label property that can be used to override the name provided by Intl.DisplayNames
{
}
The product
property denotes the current product. The property value is an object with 2 required properties:
{
name: 'Booking Engine', // required string
href: '/hotel_admin/spl.jsp', // required string
}
The propertySelector
property is used to provide the list of selectable hotels. The property value is an object with 2 required properties:
{
type, // required string (one of 'data' or 'fetch')
items, // required array of hotels or endpoint providing said array
}
The items
property value is an array of hotels or an endpoint returning such an array. Individual hotels are specified as 2-item arrays containing the hotel name and a string consisting of the hotel and guide ids separated by an underscore.
const hotels = [
['ADLER HOTEL', '3724_802'],
['Adria Hotel Prague', '1465_802'],
['Agroturismo Can Toni Xumeu', '3033_102'],
// ...
]
The user
property denotes a set of user-related links. The property value is an object with 2 required properties:
{
label: 'Profile', // required string
children: [ // required array
{
label: 'Maintain Users', // required string
href: '/hotel_admin/maintain_users.jsp', // required string
},
{
label: 'Change Password', // required string
href: '/hotel_admin/login.jsp?resetpass', // required string
},
{
label: 'Log Out', // required string
href: '/hotel_admin/logout.jsp', // required string
},
],
}
The children
property is a list of link objects, each with 2 required properties (label
and href
)
The menuBar
property provides configuration details for the lower half of the header. The property value is a flat array of menu item objects:
const menuBar = [
{
id, // required string
parentId, // required for nested menu items
label, // required string
href, // optional link (string)
group, // optional header for menu item grouping (string)
premium: { // optional object outlining premium status
value: true, // required boolean
locked: true, // required boolean
},
},
// ...
]
i18n can be optionally provided via the i18nFeed
prop. The header uses Jed. If an i18n feed is specified all header labels will be treated as i18n keys and run through Jed for translation.
FAQs
A React-based shared header component
The npm package ba-js-common-header receives a total of 21 weekly downloads. As such, ba-js-common-header popularity was classified as not popular.
We found that ba-js-common-header demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.