https://github.com/yakisova41/easy-md3-react
This is just a wrpper of @material/web that can be used in React
https://github.com/yakisova41/easy-md3-react
material-3 material-ui material-you react typescript web
Last synced: about 2 months ago
JSON representation
This is just a wrpper of @material/web that can be used in React
- Host: GitHub
- URL: https://github.com/yakisova41/easy-md3-react
- Owner: yakisova41
- License: mit
- Created: 2024-12-21T14:11:17.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-22T13:41:17.000Z (over 1 year ago)
- Last Synced: 2025-02-22T06:12:31.853Z (over 1 year ago)
- Topics: material-3, material-ui, material-you, react, typescript, web
- Language: TypeScript
- Homepage: https://yakisova41.github.io/easy-md3-react/
- Size: 405 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Easy Md3 React
This is just a wrpper of [@material/web](https://github.com/material-components/material-web/) that can be used in React easily.
So, It is complianted official design policy of Material 3 completely.
- [Docs of @material/web](https://material-web.dev/)
- [Sample page](https://yakisova41.github.io/easy-md3-react/)
## Get started
```sh
npm install https://github.com/yakisova41/easy-md3-react
```
```tsx
import { MdFilledButton } from "easy-md3-react";
function App() {
return Hello button!;
}
export default App;
```
## How it works??
What this module does is create a web-component element using the React function createElement. That is simply it.
easy-md3-react/tools.ts (40)
```ts
/**
* Get a ReactElement without react from a module that is a Lit element. (Doesn't use state and useEffect)
* @param module
* @returns
*/
export function litToReact<
T,
U extends
| keyof JSX.IntrinsicElements
| React.JSXElementConstructor = React.JSXElementConstructor
>(module: MaterialWebLitElement) {
let tagName = "default-custom-element";
module.addInitializer((initilizer) => {
tagName = initilizer.tagName;
});
// Initilize instance deliberatly to get tagname.
new module();
return (props: ComponentProps & T) => {
if (typeof props.className === "string") {
const elementProps = {
...props,
class: props["className"],
};
delete elementProps.className;
return createElement(tagName, elementProps);
} else {
return createElement(tagName, props);
}
};
}
```
## How to theming?
You can theme by use Theming component.
It's just setting style to body element by using theme.
```tsx
import { Theming, MaterialTheme } from "easy-md3-react";
import themeJson from "./theme.json";
// It's typed as MaterialTheme.
// so you can write object directly if you don't want to import json.
const theme: MaterialTheme = themeJson;
;
```
### Supported schemes
- light
- light-medium-contrast
- light-high-contrast
- dark
- dark-medium-contrast
- dark-high-contrast
### How to create theme json?
Create a theme [here](https://material-foundation.github.io/material-theme-builder/),
then do export "Material Theme(JSON)".
## LICENSE
Copyright (c) 2024 Yakisova41
Released under the MIT license