Use Polymer elements in React

Since this change you can put Polymer elements into React components and at first glance it just works:

<paper-button raised>click me</paper-button>

However, when you then start using custom attributes and events, it doesn't work anymore.

Now you need react-polymer:

import reactPolymer from 'react-polymer' // Must be imported before React
import React from 'react'

reactPolymer.registerAttribute('drawer') // Note: this is only needed for custom attributes on standard elements like div
reactPolymer.registerAttribute('main')
reactPolymer.registerEvent('response', 'onResponse')


<paper-drawer-panel>
  <div drawer> Drawer panel... </div>
  <div main> Main panel... </div>
</paper-drawer-panel>
<iron-ajax url="http://example.com/" onResponse={this.handleResponse} />

Also, all the form elements don't work like the native ones. That's because React internally has wrappers to make controlled components. We have our own wrapper for the Polymer form elements:

import reactPolymer from 'react-polymer'
import React from 'react'
import {
  PaperCheckbox,
  PaperToggleButton,
  PaperInput,
  PaperTextarea,
  IronAutogrowTextarea,
  PaperSlider,
  PaperMenu,
  PaperListbox,
  PaperRadioGroup,
  PaperTabs,
  IronSelector
} from 'react-polymer/input'


<PaperInput value={this.state.value} onChange={this.valueChanged} />
<PaperToggleButton checked={this.state.checked} onChange={this.checkedChange} />

Another problem that is solved automatically by react-polymer is that className doesn't work on Polymer elements.

See more examples.

npm install
bower install
npm run test-local

gold-* elements are not yet supported.

Polymer elements can have properties with notify attribute, which trigger {property}-changed events. However these events don't bubble, so you have to manually call addEventListener yourself.

This module does a lot of monkey patching, so it only works with React 15.

Some React issues that might simplify this once solved:

• facebook/react#4933
• facebook/react#140
• facebook/react#4751

For mixing Polymer and React, there is Maple, which doesn't seem to be maintained anymore. However, if all you are looking for is a way to incorporate pre-built Material Design components into React, there are also Material-UI and React-Materialize.

MIT.