@methodexists/ant-header

    0.1.0 • Public • Published

    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.

    Install

    npm i @methodexists/ant-header

    DownloadsWeekly Downloads

    1

    Version

    0.1.0

    License

    MIT

    Last publish

    Collaborators

    • ffab00
    • oluckyman
    • alexeyme