react-polymer 
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.
Testing
npm install
bower install
npm run test-localCaveats
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.
Notes
Some React issues that might simplify this once solved:
Similar Libraries
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.
License
MIT.