@studylessshape/mdui-react

English | 中文

mdui for react.

This package use @lit/react(npm) to convert the web components of mdui to react component.

Basic Usage

First is to import css styles after install.

@import "@studylessshape/mdui-react/mdui.css";

If the mdui had been installed, can also import by:

@import "mdui/mdui.css";

Then use components:

import {
  Layout,
  LayoutMain,
  NavigationBar,
  NavigationBarItem,
  TopAppBar,
  TopAppBarTitle,
  Slot,
} from "@studylessshape/mdui-react";

export function App() {
  return (
    <Layout>
      <TopAppBar variant="center-aligned">
        <TopAppBarTitle>App Title</TopAppBarTitle>
      </TopAppBar>
      <LayoutMain>App Content</LayoutMain>
      <NavigationBar
        onChange={(event) => {
          console.log(event.target.value);
        }}
      >
        <NavigationBarItem value="/" icon="home">
          Home
        </NavigationBarItem>
        <NavigationBarItem value="/about" icon="info">
          About
        </NavigationBarItem>
      </NavigationBar>
    </Layout>
  );
}

Event Target

Some events are encapsulated in the following form:

import { NavigationBar as _MduiNavigationBar } from "mdui/components/navigation-bar.js";

export interface NavigationBarEvent extends Event {
  target: _MduiNavigationBar & EventTarget;
}

Then you can access the value by event.target.value in event handler;

The events of other components are also consistent.

Icons

Import icons can read the doc Icon#usage-material-icons

Also can use the material-icons(npm).

If use material-icons, need import css after install:

@import "material-icons/iconfont/material-icons.css";

Todo

• [ ] locales
• [ ] functions

Contributing

Environment

• Node (>=16)
• Package manager: pnpm

Component Create

Create a react component from web component is simple used @lit/react

import { createComponent } from "@lit/react";
import React from "react";
import { Layout as _MduiLayout } from "mdui/components/layout.js";

export { Layout as LayoutType } from "mdui/components/layout.js";

export const Layout = createComponent({
  react: React,
  tagName: "mdui-layout",
  elementClas
```s: _MduiLayout,
});

I offen export the raw type because I thought it can help to ref.

import { LayoutType, Layout } from "@studylessshape/mdui-ract";

export function App() {
  const layoutRef = useRef<LayoutType>(null);
  return <Layout ref={layoutRef}></Layout>;
}

Event

If there are some special events in the component, can deil with this way:

import { createComponent, type EventName } from "@lit/react";
import { NavigationBar as _MduiNavigationBar } from "mdui/components/navigation-bar.js";
import React from "react";

export interface NavigationBarEvent extends Event {
  target: _MduiNavigationBar & EventTarget;
}

export const NavigationBar = createComponent({
  react: React,
  tagName: "mdui-navigation-bar",
  elementClass: _MduiNavigationBar,
  events: {
    onChange: "change" as EventName<NavigationBarEvent>,
    onShow: "show" as EventName<NavigationBarEvent>,
    onShown: "shown" as EventName<NavigationBarEvent>,
    onHide: "hide" as EventName<NavigationBarEvent>,
    onHidden: "hidden" as EventName<NavigationBarEvent>,
  },
});

Specified the target type can help users to handle the event.

License

MIT