@react-md/utils

@react-md/utils

This package is for providing reusable accessibility hooks, components, and utilities, a base css reset and other utility mixins, as well as general layout and app size components and hooks. This package will be used by every other scoped package within react-md, and has an extremely useful mixin for only generating styles for packages that have been installed.

Check out the usage section below for more details.

Exported components:

• AppSizeListener
• ResizeListener
• ResizeObserver
• ScrollListener
• MobileOnly
• PhoneOnly
• TabletOnly
• DesktopOnly
• FocusContainer

Export hooks:

• useAppSize
• useMediaQuery
• useOrientation
• useResizeListener
• useResizeObserver
• useCloseOnEscape
• useFocusOnMount
• useKeyboardMovement
• useKeyboardSearch
• usePreviousFocus
• useScrollLock
• useTabFocusWrap

Installation

npm install --save @react-md/utils

Usage

The main export for this package will mainly be the exposed mixins which can be included with the following import:

@import "~@react-md/utils/dist/mixins";

@include rmd-utils-base;

.custom-class {
  @include rmd-utils-rtl {
    margin-left: auto;
    margin-right: 1rem;
  }

  margin-left: 1rem;
}

.button {
  @include rmd-utils-hide-focus-outline;
}

Usage with other packages

One of the great things about this package is that there is a mixin that will automatically include all the react-md styles for packages you have included in this file.

@import "~@react-md/app-bar/dist/mixins";
@import "~@react-md/avatar/dist/mixins";
@import "~@react-md/button/dist/mixins";
@import "~@react-md/elevation/dist/mixins";
@import "~@react-md/utils/dist/mixins";

@include react-md-utils;

The example above will automatically include the styles for the app-bar, avatar, and button packages as well as the base styles utils styles.