Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-polymer with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var reactPolymer = require("react-polymer")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-polymer v4.1.0

Use Polymer elements in React

react-polymer travis npm downloads

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

  <div drawer> Drawer panel... </div>
  <div main> Main panel... </div>
<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 {
} 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.


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!)


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 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.


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.



RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free