A component that provides global configuration for RMWC.
- Module @rmwc/provider
You can wrap your top level App component with RMWC provider to set global configuration options. Just pass the options in as props.
`
import React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App'; // your main app component
import { RMWCProvider } from '@rmwc/provider';
// This example disables ripples globally by default
ReactDOM.render(
<RMWCProvider
// Globally disable ripples
ripple={false}
// Global options for icons
// Takes the same options as the icon component
icon={{
basename: 'material-icons'
}}
// Global options for typography
// allows mapping of a defaultTag or specific classes
// See the Typography docs for more info
typography={{
defaultTag: 'div',
headline1: 'h1'
}}
// Global options for tooltips
// Takes most of the options for tooltips
// See the Tooltip docs for more info
tooltip={{
align: 'right'
}}
>
<App />
</RMWCProvider>,
document.getElementById('root'),
);
`
<RMWCProvider ripple={false}>
<Button>Click me</Button>
</RMWCProvider>
<RMWCProvider ripple={true}>
<Button>Click me</Button>
</RMWCProvider>
A provider for setting global options in RMWC.
Name | Type | Description |
---|---|---|
children |
ReactNode |
Children to render |
icon |
Partial<IconOptions> |
Global options for icons |
ripple |
boolean |
Enable / Disable interaction ripples globally |
tooltip |
Partial<TooltipOptions> |
Global tooltip options |
typography |
Partial<TypographyOptions> |
Global typography options |