Author Docs for usage in React

[e111077]

Two phases:

1. docs on how to wrap a component in @lit/react + Lit SSR NextJS integration library
2. once #4432 is completed update docs to point to those

[asyncliz]

We have a few TSX clients now that might bump this priority

[MarcosBustamante]

Any guidance on how should I use @material/web on my react application?

[e111077]

Sorry we've been racked with post 1.0 bug work and haven't gotten around to docs. Our recommendation for the docs (and for future auto-generation) is to use @lit/react

it's 1.19k and 695B gzipped. It was well utilized in labs and just got released as stable.

If you want to use it in Nextjs SSR use @lit-labs/nextjs

[MarcosBustamante]

Thank you for replying.

I was able to make it work earlier using @lit/react, as suggested.

I will leave an example here, just in case someone else is wondering how to use @material/web with react:

// file: Fab.react.tsx
import {MdFab} from '@material/web/fab/fab.js';
import React from 'react';
import {createComponent} from '@lit/react';

export type {FabSize, FabVariant} from '@material/web/fab/fab.js';

export default createComponent({
  tagName: 'md-fab',
  elementClass: MdFab,
  react: React,
  events: {
    onClick: 'click',
  },
});

Now it is just a matter to import this default export and use it on the views.

@e111077, I am struggling to understand what and how many events each component dispatch in order to attach appropriated listeners on the createComponent . Is there an easy way to find it out? Are you planning to add this mapping on the documentation as well?

[e111077]

unfortunately this is us lacking documentation. We need to manually annotate each element class with the proper @event jsdoc so that it can appear in material-web.dev

For example, we annotated Menu as a test of our docs automations here:

https://material-web.dev/components/menu/#events-2

In the meantime, and until we officially vend React wrappers, it might make sense to expose them as-needed if you (understandably) don't want to scour our code for this.dispatchEvent

[MarlonX19]

Thank you for replying.

I was able to make it work earlier using @lit/react, as suggested.

I will leave an example here, just in case someone else is wondering how to use @material/web with react:

// file: Fab.react.tsx
import {MdFab} from '@material/web/fab/fab.js';
import React from 'react';
import {createComponent} from '@lit/react';

export type {FabSize, FabVariant} from '@material/web/fab/fab.js';

export default createComponent({
  tagName: 'md-fab',
  elementClass: MdFab,
  react: React,
  events: {
    onClick: 'click',
  },
});

Now it is just a matter to import this default export and use it on the views.

@e111077, I am struggling to understand what and how many events each component dispatch in order to attach appropriated listeners on the createComponent . Is there an easy way to find it out? Are you planning to add this mapping on the documentation as well?

Thank you so much for your example, it saved me a lot of time! I can't believe the docs are not explicit on how to use the components in react js

[asyncliz]

I can't believe the docs are not explicit on how to use the components in react js

The two lil' devs over here would love a docs PR to help 🥲

[SaadBazaz]

Codegen anyone?

[e111077]

The lit analyzer which would be used to codegen this was not working with this project until about 2 weeks ago. This would be an interesting project for someone to take on to automate the lit-cli's gen react wrappers command. Here is an example PR for the expected output.

https://github.com/material-components/material-web/pull/5468

[SaadBazaz]

We (Grayhat) are working on a thin React wrapper which is in-sync with this repository. It's in its early stages, we'd appreciate any help.

https://github.com/grayhatdevelopers/material-web-react