Home

Awesome

<p align="center"><img width="45%" alt="zoid" src="https://cdn.rawgit.com/krakenjs/zoid/main/zoid.png"></p>

build status code coverage npm version

A cross-domain component toolkit, supporting:

It's 'data-down, actions up' style components, but 100% cross-domain using iframes and popups!


API Docs

Public options and methods supported by zoid

Demos

Working demos of different zoid patterns

Demo App

Forkable demo app with build, test, publishing and demos pre-configured.

Example

A full example of a cross-domain component using zoid


Quick example

Define a component to be put on both the parent and child pages:

var MyLoginComponent = zoid.create({
  tag: "my-login-component",
  url: "http://www.my-site.com/my-login-component",
});

Render the component on the parent page:

<div id="container"></div>

<script src="script-where-my-login-component-is-defined.js"></script>
<script>
    MyLoginComponent({

        prefilledEmail: 'foo@bar.com',

        onLogin: function(email) {
            console.log('User logged in with email:', email);
        }

    }).render('#container');
</script>

Implement the component in the iframe:

<input type="text" id="email" />
<input type="password" id="password" />
<button id="login">Log In</button>

<script src="script-where-my-login-component-is-defined.js"></script>
<script>
    var email = document.querySelector('#email');
    var password = document.querySelector('#password');
    var button = document.querySelector('#login');

    email.value = window.xprops.prefilledEmail;

    function validUser (email, password) {
      return email && password;
    }

    button.addEventListener('click', function() {
        if (validUser(email.value, password.value)) {
            window.xprops.onLogin(email.value);
        }
    });
</script>

Useful Links

Framework Specific

Rationale

Writing cross domain components is tricky.

Consider this: I own foo.com, you own bar.com, and I have some functionality I want to share on your page. I could just give you some javascript to load in your page. But then:

What about an iframe?

You could just use a vanilla iframe for all of this. But:

zoid solves all of these problems.

It will even automatically generate React and Angular bindings, so people can drop-in your component anywhere and not worry about iframes or post-messages.

FAQ

Browser Support