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