@react-md/app-bar

@react-md/app-bar

This package is used to create a top-level fixed app bar in your application to display some sort of navigation button like a hamburger menu, your app title and/or logo, as well as any top-level actions for your app. You can also use this component to create toolbars or other header elements for different sections of your app.

Installation

npm install --save @react-md/app-bar

It is generally recommended to also install the following packages since they work hand-in-hand with this package:

npm install --save @react-md/theme \
  @react-md/typography \
  @react-md/button \
  @react-md/icon

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

The primary use of this package is to create a fixed header that includes your app's logo, title, mobile navigation, or common actions. Here's a quick example:

import React from "react";
import { render } from "react-dom";
import {
  AppBar,
  AppBarTitle,
  AppBarNav,
  AppBarAction,
  APP_BAR_OFFSET_CLASSNAME,
} from "@react-md/app-bar";
import { MenuSVGIcon, SearchSVGIcon } from "@react-md/material-icons";

const App = () => {
  const mobile = window.innerWidth < 600;

  return (
    <>
      <AppBar id="main-app-bar" fixed>
        {mobile && (
          <AppBarNav id="main-mobile-navigation" aria-label="Mobile navigation">
            <MenuSVGIcon />
          </AppBarNav>
        )}
        {<AppBarTitle keyline={!mobile}>My Company's Name</AppBarTitle>}
        <AppBarAction id="search" aria-label="Search">
          <SearchSVGIcon />
        </AppBarAction>
      </AppBar>
      <main className={APP_BAR_OFFSET_CLASSNAME}>
        <h3>Hello, world!</h3>
      </main>
    </>
  );
};

render(<App />, document.getElementById("root"));

Changelog

2.5.0 (2020-12-15)

Bug Fixes

• @react-md/form: better blur error cases for useNumberField (8b927ab)
• @react-md/form: fixed FormMessage counter prop-type validation (9ece3e1)
• @react-md/form: fixed messageProps error from react when disableMessage is enabled (e452aff)
• @react-md/form: Floating Label for controlled value Invalid numbers (ef1d764)
• @react-md/form: Maintain Floating Label for Invalid Numbers (2443f9a)
• @react-md/form: More fixes for number inputs being considered valued (1832e69)
• @react-md/form: updated TextField PropTypes to allow for search input type (23d92dd)
• @react-md/utils: GridCell now correctly uses largeDesktop when desktop is also provided (fd26b8b)
• @react-md/utils: nearest ensures min and max range for value (48181b3)
• @react-md/utils: updated nearest to support a custom range for sliders (6cfc67e)

Features

• @react-md/form: added a new useTextField hook to validate the TextField and TextArea values (578257c)
• @react-md/form: added a number-recommended type for validation (18c772e)
• @react-md/form: added a PasswordWithMessage component to be used with useTextField Hook (f6d84f2)
• @react-md/form: added a TextAreaWithMessage component to be used with useTextField Hook (e358799)
• @react-md/form: added a TextFieldWithMessage component to be used with useTextField Hook (f2d7e5d)
• @react-md/form: added a useNumberField hook to control number field values (c705f2c)
• @react-md/form: better defaults for validation (4003a07)
• @react-md/icon: added an error icon to the IconProvider Component and useIcon Hook (4dfd50a)
• @react-md/icon: added flexReverse prop to TextIconSpacing (c4ee05b)
• @react-md/utils: added a withinRange util for number validation (e8fb252)
• @react-md/utils: changed the default @include order for easier overrides (4705b09)