Skip to content

Latest commit

 

History

History

utils

README.md

@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.