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 |
Contributing
See CONTRIBUTING.md for how to develop a component.