Using material-components with React and passing values into tags

[stefdude1999]

In a previous discussion, the question was about bringing material-web components in React, and the answer was to put them in a wrapper, and import that function. What if you wanted to create an icon button, something like this:

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

How would I pass in an tag, with a check type of icon, or whatever other icon?

[asyncLiz]

You can pass in props.children to the content of the element.

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

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

[anthonyleung-dev]

In a previous discussion, the question was about bringing material-web components in React, and the answer was to put them in a wrapper, and import that function. What if you wanted to create an icon button, something like this:

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

How would I pass in an tag, with a check type of icon, or whatever other icon?

import React from 'react'
import { createComponent } from '@lit/react'
import { MdIconButton as _MdIconButton } from '@material/web/iconbutton/icon-button.js'
import { MdIcon as _MdIcon } from '@material/web/icon/icon.js'

const MdIcon = createComponent({
    react: React,
    tagName: 'md-icon',
    elementClass: _MdIcon,
})

const MdIconButton = createComponent({
    react: React,
    tagName: 'md-icon-button',
    elementClass: _MdIconButton,
    events: {},
})

export const Example = () => {
 return (
            <MdIconButton>
                <MdIcon>settings</MdIcon>
            </MdIconButton>
        )
}

I tried to create a React library using this library along with lit/react. You can refer to my GitHub project for an example of how to work with React.

https://github.com/anthonyleung-dev/react-material-web