To use zoid, you define a component using zoid.create(), which specifies a custom HTML tag and the URL where the component's implementation lives. This definition must be shared by both the parent page and the child page (the iframe content).
1. Define the component
Both the parent and the child must run this code:
var MyLoginComponent = zoid.create({
tag: "my-login-component",
url: "http://www.my-site.com/my-login-component",
});
2. Render on the parent page
On the parent page, you call the component function with the desired props (including callbacks) and then call .render(selector) to mount it into a DOM element.
3. Implement in the child (iframe)
Inside the iframe, you access the passed props via window.xprops. You can read data down from the parent and call functions back up to the parent by invoking these xprops methods.
Note: The component implementation is 'data-down, actions up' style, where the parent passes state and the child triggers callbacks.
// 1. Define the component (shared by parent and child)
var MyLoginComponent = zoid.create({
tag: "my-login-component",
url: "http://www.my-site.com/my-login-component",
});
// 2. Render 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>
// 3. Implement 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>
