react-polymer

Use Polymer elements in React

react-polymer now supports Polymer 2.0! If you need to use Polymer 1.0 please use v3

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('color-picker-selected', 'onColorPickerSelected')


<paper-drawer-panel>
  <div drawer> Drawer panel... </div>
  <div main> Main panel... </div>
</paper-drawer-panel>
<paper-swatch-picker onColorPickerSelected={this.colorChange} />

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.

ES6

This module uses some ES6 features, so you should run it through a transpiler like babel. If you use browserify, you don't need to do anything. If you use webpack, you have to enable transpiling, but replace the default exclude config with exclude: s => /node_modules/.test(s) && !/react-polymer/.test(s). (If you know how to make webpack do this automatically like it works with browserify, please tell me!)

Testing

npm install
bower install
npm run test-local

Caveats

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 on internal APIs of react-dom, so it only works with React 15. It is recommended to pin React to a fixed version, and always test new versions before updating. There is no guarantee that it will still work, even after patch-level updates of React.

Notes

Some React issues that might simplify this once solved:

• https://github.com/facebook/react/issues/4933
• https://github.com/facebook/react/issues/140
• https://github.com/facebook/react/issues/4751

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.