Is it possible to use Polymer inside of React?

Question

I have been using React and look to use Polymer tags inside of React. React does not recognize Polymer tags as React only handles basic DOM tags. Is there a way to add the Polymer tags to React DOM library?

Answer 1

Yes, it is possible.

1. Create a polymer element.

   <link rel="import" href="../../bower_components/polymer/polymer.html">
   

   Polymer({
       is: 'calender-element',
       ready: function(){
           this.textContent = "I am a calender";
       }
   });
   

2. Make the polymer component a html tag by importing it in a html page. E.g. import it in the index.html of your react application.

   <link rel="import" href="./src/polymer-components/calender-element.html">
   

3. Use that element in the jsx file.

   'use strict';
   
   import React from 'react';
   
   class MyComponent extends React.Component{
       render(){
           return (
               <calender-element></calender-element>
           );
       }
   }
   
   export default MyComponent;
   

Answer 2

Is it possible to use Polymer inside of React?

Short answer: not really.

Long answer: kinda. You have to create components which directly create the nodes and manipulate attributes. There are also other considerations for children of the element, etc.

Is it possible to use React inside of Polymer?

It's pretty much the same answer this way, you'd have to wrap a React component in a polymer element.

Why?

Polymer (based on web components), and React (a ui component library), are both based on 'components'. Because there's no single way to express a component in web, you'll need to bridge between the various libraries. The same holds true for questions about 'react in angular', 'jquery plugin in react', 'knockout in jquery plugin', 'react in backbone', 'angular with polymer elements which use backbone and react with polymer elements which use angular', etc.

In a case like angular with polymer, you might think it's very simple, but polymer doesn't know about evaluating angular expressions, or any kind of declarative callbacks. You need a bridge in nearly every case, and they're never pretty.

Answer 3

this is a fairly old question but how about https://www.npmjs.com/package/react-polymer ? isn't this a support of polymer components for react?

import reactPolymer from 'react-polymer'; //IMPORTANT: Must be imported before React.
import React from 'react';

reactPolymer.registerAttribute('raised');
reactPolymer.registerAttribute('url');
reactPolymer.registerEvent('response', 'onResponse');


<paper-button raised>another button</paper-button>
<iron-ajax url="http://example.com/" onResponse={this.handleResponse} />

Answer 4

Answer according to current stages of react and polymer

Since this question was asked a while ago and a lot has changed since then, I'd like to add that you can now use polymer elements in react directly but for your custom attributes and events it causes problem it can easily be handle by using react-polymer, It has support for almost all elements, with exception of gold-* elements.

Why would you want to use Polymer with react?

1. It can further simplify your development process or make it a big mess. It depends on how you use it
2. Speed of development and ease of use offered by polymer components is unrivaled.
3. React can further break down your components comprising of polymer components, into manageable pieces.
4. Simply because, react and JSX is love.
5. Hey why the hell not??

Answer 5

The answer is YES. But it is not straight forward. So, I tried following some documentations which are around in fact even the official one but the best was this: https://medium.com/jens-jansson/start-using-web-components-in-react-6ccca2ca21f9

I followed the steps mentioned and it worked! I am also mentioning the github repo wherein I tried to integrate the vaadin datepicker and also one of the polymer element paper-input. https://github.com/manit815/react-with-webcomponent

Answer 6

Yes, you can use Polymer element inside react.

1. Create Polymer element

   import { LitElement, html } from 'lit-element';
   export class CustomButton extends LitElement {
   static get properties() {
       return {
           isDisabled : { type: Boolean },
           buttonType: { type: String },
       };
   }
   
   constructor() {
       super();
       this.isDisabled = false;
       this.button = 'button';
   }
   
   render() {
       return html`
           <button>
               <slot></slot>
           </button>
       `;
      }
   }
   
   customElements.define('polymer-button', CustomButton);
   

2. Import the element into an HTML file using <script type="module">. Use the import statement (as shown above) to import it from another ES6 module.

   <script type="module" src="./polymer-button.js">
   

3. Once you've imported it, you can use a custom element just like you'd use a standard element.

   import React from 'react';
   export const PolymerButton = () => {
      return ( 
          <polymer-button /> 
       )
   }
   

Answer 7

I just tried this today and I was able to successfully use the material elements from their element catalog. I haven't gotten around to testing it thoroughly, but as far as using the tags in React goes, it works and all the html and css is there.

To use existing elements, just follow their using elements guide.