Package Exports

react-polymer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-polymer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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')
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-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, 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.