@methodexists/ant-header

Header component for projects based on antd library

Stats

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

Readme

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.

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.