@myuw-web-components/myuw-profile
Advanced tools
Web component that provides an avatar button and profile menu
Add the following import to your page's <head>:
<script type="module" src="https://unpkg.com/@myuw-web-components/myuw-profile@^1?module"></script>
<script nomodule src="https://unpkg.com/@myuw-web-components/myuw-profile@^1"></script>
Note: You may want to specify a specific version of the component to ensure stability. See the change log or the npm entry for version information.
Use the component's HTML tag wherever you want:
<myuw-profile
login-url=""
logout-url=""
background-color=""
>
</myuw-profile>
Because it has multiple states depending on whether there is an active session, all elements of the profile component are hidden by default. The component listens for a CustomEvent called "myuw-login" and its state is dependent on the data you pass when you dispatch that event:
/*
Notes about configuring the event:
- The event MUST contain a "detail" object. The contents of the detail object determine what the component will display:
- An empty "detail" object ( detail: {} ) will result in the login button being displayed
- An empty "person" object ( person: {} ) will result in a generic session being displayed (using the person icon). This should only be used when the session doesn't provide a user's name, username, email, etc.
- A person object containing a "firstName" ( person: {firstName: "Name"} ) will result in the full session display
- The "bubbles" property is optional unless you're dispatching the event from an element/scope other than "document"
*/
var customEvent = new CustomEvent('myuw-login', {
bubbles: true, // optional
detail: { // required always
person: { // required for generic session display
"firstName": "User" // required for full session display
}
}
});
// Dispatch the event
document.dispatchEvent(customEvent);
If you want the component to show something on the initial page load (and not be hidden), make sure to dispatch the "myuw-login" event after all web components are loaded and upgraded (i.e. ready to be interacted with). The webcomponentsjs polyfill provides and event you can hook into:
document.addEventListener('WebComponentsReady', function() {
var customEvent = new CustomEvent('myuw-login', {
// Configure the event data to display what you want
});
// Dispatch the event
document.dispatchEvent(customEvent);
});
<a> tag--myuw-profile-font: Set the font stack for this component--myuw-profile-login-color: Set the font color of the "Login" button--myuw-profile-background-color: Set the background color of the circular menu button--myuw-menu-color: The text color of links/buttons in the profile menuFor more information about CSS variables and how they work with MyUW Web Components, reference the styles component
Cross-browser testing provided by:
1.3.2
FAQs
Web component that provides an avatar button and profile menu
The npm package @myuw-web-components/myuw-profile receives a total of 353 weekly downloads. As such, @myuw-web-components/myuw-profile popularity was classified as not popular.
We found that @myuw-web-components/myuw-profile demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."