An example of integrating with React without the Foundation / Adapter pattern

Notes

This is not a feature request or a bug, so if there is a better way to communicate this, please let me know and I will close this PR.

My main purpose in opening up this issue is to get feedback on this approach for integrating material-components-web with React. Does this simple approach miss anything important?

Integration approach

I am attempting to use material-components-web with React for a production web app. I found a way of integrating with React that is much more lightweight than the Foundation / Adapter pattern.

The basic idea is create and destroy vanilla material-component-web JS components based on the React lifecycle. I hook up the material component to the right element of the DOM by using the react API to get a refence to a DOM element.

Example

import React from 'react'
import { textfield } from 'material-components-web'

export default class TextField extends React.PureComponent {
  
  // Instantiate the vanilla material component once the react component mounts
  componentDidMount() {
    this.mdcComponent = new textfield.MDCTextfield(this.mdcMount)
  }

  // Clean up the vanilla material component along with the react component 
  componentWillUnmount() {
    this.mcdComponent.destroy()
  }

  render() {
    // Note in the second opening div how I get a reference to the DOM element of the text field
    return (
      <div className="mdc-form-field">
        <div className="mdc-textfield" ref={(div) => { this.mdcMount = div }}>
          <input
            type="text"
            className="mdc-textfield__input"
            id="demo-input"
            onChange={this.props.onChange}
          />
          <label htmlFor="demo-input" className="mdc-textfield__label">
            {this.props.label}
          </label>
        </div>
      </div>
    )
  }
}

[traviskaufman]

Since there’s been no discussion here for a month, closing. That being said, we have begun informal, not-at-all planned out talks about how we can simplify our adapter pattern approach in future releases of the library.

[amsheehan]

To follow up from before after discussing a little more with the rest of the core team:

There’s nothing inherently wrong with this approach on the web. It may get you varying milage component to component. However, some people may want to take an isomorphic approach to their React app, some people may be writing a React Native app, some people may be using a state container.

For these instances, where you need a Material UI library that works across environments, you would need to use the foundation/adapter pattern. This allows us to use components that have different considerations when identifying elements and all that’s associated with them in a regular browser environment (capturing/handling events, observing changes, etc…).

We would love to hear any and all ideas for how to make these abstractions easier on frameworks. Please continue the discussion here, update us on the progress of the apps you’re building and let us know if there’s anything we can do to help!