unity-account-switcher
v0.2.9
Published
Unity Account Switcher
Readme
Unity Account Switcher
This is Web Component build with Stencil.
The Unity Account Switcher is a web component implementation of the Unity Account Widget, with added functionality for having multiple accounts logged in, and the ability to switch between them.
The component provides this core functionality, and also options for each website that uses the component, to configure what other links should be part of the menu when opened.
Using this component
Unity Account Switcher web component can be integrated into different web frameworks. Now we will show you how to embedded the component one by one.
Javascript
Put this line in the tag:
<head>
...
<script src="https://unpkg.com/[email protected]/dist/unity-account-switcher.js"></script>
</head>Then you can use component unity-account-switcher directly in the body.
<body>
....
<unity-account-switcher></unity-account-switcher>
</body>Finaylly you can add config & eventListener in the javascript code:
const uasCmp = document.querySelector('unity-account-switcher');
const config = JSON.stringify({
menuItems: [
{
key: 'create_company',
title: 'Create a company',
},
{
key: "contact_us",
title: 'Contact us',
href: 'https://forum.unity.com/forums/unity-connect.120',
},
],
env: 'int',
loginRedirectURL: 'http://...',
logoutRedirectURL: 'http://...',
userProfileURL: 'https://...',
clientID: '...',
})
uasCmp.config = config;
uasCmp.addEventListener('menuClicked', e => {
const menuKey = e.detail;
// do the right thing
});ReactJS
Run the command to install the npm package:
npm install unity-account-switcher --saveThen add this code before ReactDOM.hydrate or ReactDOM.render:
const AccountSwitcher = require('unity-account-switcher/loader');
AccountSwitcher.applyPolyfills().then(() => {
AccountSwitcher.defineCustomElements(window);
});Finally you can use the component like this:
let registered = false;
export class DemoComponent extends Component {
componentDidMount() {
if (!registered) {
registered = true;
window.addEventListener('uasMenuClicked', this.onMenuClicked);
}
}
componentWillUnmount() {
window.addEventListener('uasMenuClicked', this.onMenuClicked);
}
onMenuClicked = (e) => {
const menuKey = e.detail;
// do the right thing
}
render() {
const config = JSON.stringify({
menuItems: [
{
key: 'create_company',
title: 'Create a company',
},
{
key: "contact_us",
title: 'Contact us',
href: 'https://forum.unity.com/forums/unity-connect.120',
},
],
env: 'int',
clientID: '...',
});
return (
<unity-account-switcher ref={e => this.unityAccountSwitcher = e} config={config}/>
);
}
}