Header component for projects based on antd library


0.1.04 years ago4 years agoMinified + gzip package size for @methodexists/ant-header in KB



Header component for projects based on antd library


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


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

Will render header with navigation menu button only.

Feedback button

    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

    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

    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>

Will render custom content in the center of the header.

Compact view


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

Sider popover


Will render navigation menu as a popover



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


See CONTRIBUTING.md for how to develop a component.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.