
Research
Security News
Lazarus Strikes npm Again with New Wave of Malicious Packages
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
@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 false
node-sass
is no longer supported and users must switch to sass
InteractionModeListener
since it was an alias for UserInteractionModeListener
ResizeObserver
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.
We found that @react-md/app-bar demonstrated a not healthy version release cadence and project activity because the last version was released 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
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.
Security News
Opengrep continues building momentum with the alpha release of its Playground tool, demonstrating the project's rapid evolution just two months after its initial launch.