https://github.com/jscissr/react-polymer
Use Polymer elements in React
https://github.com/jscissr/react-polymer
polymer polymer-element react
Last synced: 24 days ago
JSON representation
Use Polymer elements in React
- Host: GitHub
- URL: https://github.com/jscissr/react-polymer
- Owner: jscissr
- License: mit
- Created: 2015-07-28T13:39:10.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2019-02-09T11:15:07.000Z (over 6 years ago)
- Last Synced: 2025-04-08T16:11:25.338Z (6 months ago)
- Topics: polymer, polymer-element, react
- Language: JavaScript
- Homepage: https://jscissr.github.io/react-polymer/demo/
- Size: 604 KB
- Stars: 133
- Watchers: 7
- Forks: 13
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-polymer [![travis][travis-image]][travis-url] [![npm][npm-image]][npm-url] [![downloads][downloads-image]][npm-url]
[travis-image]: https://img.shields.io/travis/jscissr/react-polymer/master.svg
[travis-url]: https://travis-ci.org/jscissr/react-polymer
[npm-image]: https://img.shields.io/npm/v/react-polymer.svg
[npm-url]: https://npmjs.org/package/react-polymer
[downloads-image]: https://img.shields.io/npm/dm/react-polymer.svg*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](https://github.com/facebook/react/pull/1551) you can put
Polymer elements into React components and at first glance it just works:```js
click me
```However, when you then start using custom attributes and events, it doesn't work
anymore.Now you need react-polymer:
```js
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')
Drawer panel...
Main panel...```
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:```js
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'```
Another problem that is solved automatically by react-polymer is that
`className` doesn't work on Polymer elements.See [more examples](https://github.com/jscissr/react-polymer/blob/master/demo/index-source.js).
## ES6
This module uses some ES6 features, so you should run it through a transpiler like [babel](https://babeljs.io/). If you use [browserify](http://browserify.org/), you don't need to do anything. If you use [webpack](https://webpack.github.io/), you have to [enable transpiling](https://webpack.js.org/loaders/#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
```shell
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
A React issue that might simplify this once solved:
- https://github.com/facebook/react/issues/4751
## Similar Libraries
For mixing Polymer and React, there is [Maple](https://github.com/Wildhoney/Maple.js), 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](https://github.com/callemall/material-ui) and [React-Materialize](https://github.com/react-materialize/react-materialize).
## License
MIT.