@methodexists/ant-header NPM

ant-header

Header component for projects based on antd library

Usage

Use <Header /> component in your app route to show app-wide tools and navigation menu button.

Minimal

<Header
  onSwitchSider={() => this.setState({ isSiderCollapsed: !isSiderCollapsed })}
  isSiderCollapsed={isSiderCollapsed}
  navMenu={<Sider />}
/>

Will render header with navigation menu button only.

Feedback button

<Header
  ...
  bugReporter={{
    apiUrl: 'myApi/bugs',
    supportEmail: 'support@example.com'
  }}
/>

Will render feedback button with name taken from App.header.techSupport ('Support' by default).
When clicked will show Bug Reporter form. You can define translations for Bug Reporter form using these ids:

id: 'BugReporter.placeholder', defaultMessage: 'Leave us a message',
id: 'BugReporter.success', defaultMessage: 'Your message has been sent',
id: 'BugReporter.send', defaultMessage: 'Send',
id: 'BugReporter.help', defaultMessage: 'Don’t forget to describe what you did, what you saw happened and what you expected to happen. Please mention how critical it is.',
id: 'BugReporter.requiredWarning', defaultMessage: 'Please leave us a message',
id: 'BugReporter.sendError', defaultMessage: 'Error sending the message',
id: 'BugReporter.contactUs', defaultMessage: 'If you have problems leaving a message you can contact us via email directly:'

Locale selector

<Header
  ...
  localeSelector={{
    onSwitchLocale: l => console.info('locale switch call', l),
    locales: { en: { name: 'English' }, es: { name: 'Espanol' } },
  }}
/>

Will render locale selector dropdown where user can select app locale.

Profile menu

<Header
  ...
  profileMenu={{
    onProfilePageClick: () => console.info('go to profile page'),
    onSignOutClick: () => console.info('sign out'),
    username: 'John Doe',
  }}
/>

Will render profile menu dropdown titled by username. The dropdown will have two items: 'My profile' and 'Sign out'. They could be translated by declaring these ids:

id: 'App.header.signOut', defaultMessage: 'Sign Out',
id: 'App.header.myProfile', defaultMessage: 'My Profile'

Custom content

<Header ...>
  <div>Custom content</div>
</Header>

Will render custom content in the center of the header.

Compact view

<Header
  bugReporter=...
  localeSelector=...
  profileMenu=...
  isCompact={true}
/>

Will render buttons in compact mode: no text, icons only.

Sider popover

<Header
  isSiderPopover={true}
/>

Will render navigation menu as a popover

API

props

Prop	Type	Default	Description
hasSider	bool	`false`	If true show Sider button
navMenu	element	`undefined`	Content to show in the navigation popover
onSwitchSider	func	`undefined`	Fired when the navigation button is clicked
isSiderCollapsed	bool	`true`	Affects the navigation button icon
isSiderPopover	bool	`false`	If true, the `navMenu` content will be presented in a popover when the navigation button is clicked
isCompact	bool	`false`	If true, will show tools buttons without text, icons only
extra	element or array of elements	`undefined`	Show extra components near the buttons
bugReporter	object	`undefined`	When defined will show Bug Reporter button
localeSelector	object	`undefined`	When defined will show Locale Selector
profileMenu	object	`undefined`	When defined will show Profile Menu

`bugReporter` props

Prop	Type	Description
`*`apiUrl	string	The URL where to post bug report message
`*`supportEmail	string	Email address to show in the bug reporter form

`localeSelector` props

Prop	Type	Description
`*`locales	object	Object key should be lang name ('en', 'es', ...) and the value is `{ name }` object. `name` will be displayed in the menu.
`*`onSwitchLocale	func	Called when dropdown item is selected. Receives lang name as an argument.

`profileMenu` props

Prop	Type	Description
`*`username	string	User name to show as a button title
`*`onProfilePageClick	func	Called when 'My Profile' item is clicked
`*`onSignOutClick	func	Called when 'Sign out' item is clicked