@react-md/app-bar
Advanced tools
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.
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
You should check out the full documentation for live examples and more customization information, but an example usage is shown below.
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"));
3.0.0 (2021-08-13)
This release should be relatively simple for most consumers of this library since the main breaking change is dropping support for node-sass and requiring sass since node sass has been deprecated as well as removing deprecated variables, hooks, and components.
Most users should be able to run the following commands to upgrade to v3.0.0:
npm update react-md
npm uninstall node-sass
npm install sass
Or with yarn
yarn add react-md
yarn remove node-sass
yarn add sass
In addition, there is now partial support for the new Sass module system with the react-md package which also simplifies the import usage and has a slight build performance improvement for large projects.
To start using the new module system, update all the @import statements as shown below:
-@import '~@react-md/theme/dist/mixins';
-@import '~@react-md/utils/dist/mixins';
-// other react-md imports
+@use 'react-md' as *;
// No other changes required!
If you override variables within react-md:
-@import '~@react-md/theme/dist/color-palette';
-$rmd-theme-light: false;
-$rmd-theme-primary: $rmd-purple-500;
-$rmd-theme-secondary: $rmd-pink-a-200;
-
-@import '~react-md/dist/styles';
+@use '@react-md/theme/dist/color-palette' as color;
+@use 'react-md' as * with (
+ $rmd-theme-light: false,
+ $rmd-theme-primary: color.$rmd-theme-purple-500,
+ $rmd-theme-secondary: color.$rmd-theme-pink-a-200,
+);
+
+@include react-md-utils;
Check out the updated customizing your theme documentation, #1214, or 958f34f for more in-depth examples.
$rmd-theme-dark-elevation now defaults to true instead of falsenode-sass is no longer supported and users must switch to sassInteractionModeListener since it was an alias for UserInteractionModeListenerResizeObserver component and useResizeObserverV1 implementationTooltipHoverModeConfig component$rmd-card-dark-elevation-bordered-background-color variableTooltipped componentuseIndeterminateChecked is now an object of optionssass since it's deprecated (126fb5a)defaults to true (b371337)sass usage with: @use 'react-md'; (787bfb5)@use (68e8c6b)react-md/dist/_everything.scss (c7177e6)sassdoc and variables to use everything.scss (a0f0699)sass (5376be1)useIndeterminateChecked (6b7871f)Tooltipped component (6dca9b1)typedoc API in navigation tree (c388ba6)@use imports (958f34f)defaults (b2269ff)sass instead of node-sass (d8ddf51)react-md (c0f25f7)FAQs
This small package implments the AppBar spec in material design.
The npm package @react-md/app-bar receives a total of 1,003 weekly downloads. As such, @react-md/app-bar popularity was classified as popular.
We found that @react-md/app-bar demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.