react-material-design-provider

Unofficial implementation of Material Design 3 theme provider for React.

This library does not implement components. The ideia is to implement the design system of Material Design (typography, colors, palette, etc.) and provide them to the application.

Installation

npm install react-material-design-provider
# or
yarn add react-material-design-provider

Usage

To use Material Design, wrap you app under MaterialProvider and pass your theme:

import { MaterialLightTheme, MaterialProvider } from "react-material-design-provider"


export function App() {
    return (
        <MaterialProvider theme={MaterialLightTheme}>
            {/* ... */}
        </MaterialProvider>
    )
}

Then, to get the theme, call useMaterialTheme in your component:

import { useMaterialTheme } from "react-material-design-provider"


export function Component() {
    
    
    const { colors } = useMaterialTheme()


    // ...
}

The library provides the default light and dark themes of Material Design. If you wish a custom theme, create an object of type MaterialTheme and pass it to the provider's theme prop:

import { MaterialTheme } from "react-material-design-provider"


const customTheme: MaterialTheme = {
    palette: {
        // ...
    },
    shape: {
        // ...
    },
    state: {
        // ...
    },
    typography: {
        // ...
    },
    colors: {
        // ...
    },
}

Docs for material provider

MaterialProvider

The provider of Material Design. It receives the theme through theme prop. The theme is an object of type MaterialTheme.

useMaterialTheme

function useMaterialTheme(): MaterialTheme

Hook to get current material theme. Returns an object of type MaterialTheme.

MaterialTheme

type MaterialTheme = {
    palette: Palette
    shape: Shape
    state: State
    typography: Typography
    colors: Colors
}

Type that represents a material theme. It contains the properties used in Material Design. See:

• Palette
• Shape
• State
• Typography
• Colors

MaterialLightTheme

Default light theme of Material Design 3. Object of type MaterialTheme.

MaterialDarkTheme

Default dark theme of Material Design 3. Object of type MaterialTheme.

Docs for Material Design implementation

Palette

The palette contains a few key colors and its tone variations. Those colors are referenced on other places. See: palette.ts.

The default palette key colors are:

| Color name | Color code | |---------------|------------| primary | #6750A4 secondary | #958DA5 tertiary | #B58392 error | #E46962 neutral | #938F96 neutral variant | #938F99

Shape

Shape represents how much the surface border is rounded. See: shape.ts.

State

State represents the layer opacity above the surface when the surface is hovered, pressed, focused or dragged. If the surface is disabled, the state represents the surface'a opacity. See: state.ts.

Typography

The typography specifies the text properties for each variant and size. See: typography.ts.

Colors

The colors tokens used in Material Design. Some tokens are added to calculate the opacity or to improve usability (like the elevation tokens). See: colors-light.ts, colors-dark.ts and colors-type.ts.