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>;
}