Turn your web-app into a cross-domain component with five lines of code

This article is part of a series on PayPal’s Cross-Domain Javascript Suite.

I’ve just published v2 of xcomponent:

With the latest version, it’s even easier to turn any web-app (or web-component) into a cross domain component. You just create a component, give it a name, and point it to the url where your app will be rendered:

var HelloWorldComponent = xcomponent.create({
tag: 'hello-world',
url: 'http://www.my-site.com/hello-world'

Now, all you need to do is include the xcomponent definition you just created, and accept some props from window.xprops, inside the page which your url renders:

<script src="http://www.my-site.com/my-component.js"></script>
console.log('Hello', window.xprops.name, '!');

And you’re done! Anyone wanting to render your page can now do so, and pass down props directly from their page into the iframe-component:

    name: 'Spock',
    personWasGreeted: function(name) {
console.log(name, 'was successfully greeted!');
}, '#container');

This is a great way of sharing functionality from your site, to another site.

Hope this is useful. This example was just vanilla javascript, but it works great with libraries like React too!

Thanks all!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.