How to use the design system in react or other frameworks?

[futornoi]

Perhaps someone asked a question. I don’t quite understand how this design system can be used conveniently for React. Are there any ready-made implementation examples?

[asyncLiz]

Better React docs and helpers are on our todo list, but until then it takes a bit of setup.

I'd recommend reading through https://lit.dev/docs/frameworks/react/ to start with. The tl;dr is to use @lit-labs/react to build wrapper React components, then use those.

import React from 'react';
import {createComponent} from '@lit/react';
import {MdFilledButton as MdFilledButtonWebComponent} from '@material/web/button/filled-button.js';

export const MdFilledButton = createComponent({
  tagName: 'md-filled-button',
  elementClass: MdFilledButtonWebComponent,
  react: React,
});

import {MdFilledButton} from './wrappers/md-filled-button';

export function MyApp() {
  return <MdFilledButton>Button</MdFilledButton>;
}

[denkochev]

You saved my evening. Thanks :D

[stefdude1999]

How would I pass children to tags? Like if I had

<md-icon-button>
  <md-icon>check</md-icon>
</md-icon-button>

I'm using the above method to create a MdIconButton, but then how do I pass a check icon to it, to display a check?

[asyncLiz]

#5544 (comment) for posterity!

function IconButton(props) {
  return <md-icon-button>{props.children}</md-icon-button>;
}

function Usage() {
  return <IconButton><md-icon>check</md-icon></IconButton>;
}

[brandonsbque]

Hey! i realize i didn't put this here when i made it - I feel like it should help others! (already helped 8 people from what i see since 8 people starred the repo) I made a python script that will generate a file that other devs can paste into the root folder of their React project, and it would make all the components in @material/web available to use in React. This is solution is based on this specific workaround. I tried my best to write a read.me for it that would help users on how to use the script, and how to actually use the @material/web components in React.

Here's the repo! https://github.com/brandonsbque/custom-component-gen . Hopefully, I'm not breaking any Github or you guys' policy here by linking my repo, since this is the first time i've done something like this, but if so please let me know! I hope this helps others 😄 I would really appreciate it if you guys gave some stars on the repo too if you found it helpful 🤩