• Public
  • Public/Protected
  • All

Interface ConfigurationProps


  • AppSizeOptions
  • StatesConfigProps
    • ConfigurationProps



children: ReactNode

The children that should gain this configuration. This is required since there's really no reason to use this component if you don't have children that consume the React context.

defaultDir?: WritingDirection | (() => WritingDirection)

The current writing direction for your app. This defaults to "ltr" but should be changed to "rtl" if using a language that is read from right to left.


@since 2.3.0

defaultSize?: AppSize

An optional default size to use for your app. This is really only helpful when trying to do server side rendering or initial page render since the default behavior is to check and update the size once mounted in the DOM.

desktopLargeMinWidth?: QuerySize

The min width for a large desktop screen.

desktopMinWidth?: QuerySize

The min width for a desktop screen.

disableProgrammaticRipple?: boolean

Boolean if the ripple component should not be triggered after a "programmatic" ripple effect. This would be if the .click() function is called on an element through javascript or some other means.

disableRipple?: boolean

Boolean if the ripple effect should be disabled for all child components that use the Ripple states.

formTheme?: FormThemeOptions

An object of any overrides for the FormThemeProvider.

hoverMode?: HoverModeConfiguration



@since 2.8.0

icons?: ConfigurableIcons

An object of all the configurable icons that you want to override throughout react-md.

menuConfiguration?: Readonly<MenuConfiguration>



@since 5.0.0

onAppResize?: (nextSize: AppSize, lastSize: AppSize) => void

Type declaration

    • (nextSize: AppSize, lastSize: AppSize): void
    • An change handler for the app size. This will be called each time the app size changes based on a window resize event and will be provided the next size and the previous size.


      • nextSize: AppSize
      • lastSize: AppSize

      Returns void

phoneMaxWidth?: QuerySize

The max width to use for phones. This one is a max width unlike the others since everything from 0 to this value will be considered a phone.

rippleClassNames?: CSSTransitionClassNames

The class names to apply during the different stages for the ripple animation. You probably don't want to use this.

rippleTimeout?: TransitionTimeout

The amount of time before a ripple finishes its animation. You probably don't want to change this value unless you updated the duration in scss or changed the different class names for the ripple animation.

tabletMaxWidth?: QuerySize

The max width for a tablet device. This should normally be 1px less than the desktopMinWidth, but it can be any value if needed. The tablet has a range of min to max so that you can have a bit more control.

tabletMinWidth?: QuerySize

The min width for a tablet device.

Generated using TypeDoc