stefanjudis / Web Vitals Element
Licence: mit
A custom elements wrapper around the web-vitals lib.
Stars: β 93
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Web Vitals Element
Dark Mode Toggle
A custom element that allows you to easily put a Dark Mode π toggle or switch on your site:
Stars: β 550 (+491.4%)
Mutual labels: custom-elements
Shaf Chart
Custom element that upgrades table to a chart
Stars: β 45 (-51.61%)
Mutual labels: custom-elements
Use Custom Element
Custom hook to bridge Custom Elements (Web Components) to React.
Stars: β 77 (-17.2%)
Mutual labels: custom-elements
Xy Ui
π¨ι’εζͺζ₯ηεη web components UIη»δ»ΆεΊ
Stars: β 603 (+548.39%)
Mutual labels: custom-elements
Android Customtoast
Easy to use Custom Toast Library for Android
Stars: β 24 (-74.19%)
Mutual labels: custom-elements
Home Assistant Custom Ui
Custom UI elements for https://home-assistant.io
Stars: β 503 (+440.86%)
Mutual labels: custom-elements
Aybolit
Lightweight web components library built with LitElement.
Stars: β 90 (-3.23%)
Mutual labels: custom-elements
Task Lists Element
Drag and drop task list items.
Stars: β 73 (-21.51%)
Mutual labels: custom-elements
Details Dialog Element
A modal dialog that's opened with <details>.
Stars: β 603 (+548.39%)
Mutual labels: custom-elements
Custom Element
A base class for Web Components (Custom Elements) which provides simple data binding.
Stars: β 60 (-35.48%)
Mutual labels: custom-elements
Emoji Picker Element
A lightweight emoji picker for the modern web
Stars: β 587 (+531.18%)
Mutual labels: custom-elements
Redux Store Element
A custom element allowing a more declarative use of Redux.
Stars: β 83 (-10.75%)
Mutual labels: custom-elements
Remount
Mount React components to the DOM using custom elements
Stars: β 522 (+461.29%)
Mutual labels: custom-elements
Custom Elements Ts
Create native custom elements using Typescript
Stars: β 52 (-44.09%)
Mutual labels: custom-elements
Stencil
A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
Stars: β 9,880 (+10523.66%)
Mutual labels: custom-elements
Auto Check Element
An input element that validates its value with a server endpoint.
Stars: β 85 (-8.6%)
Mutual labels: custom-elements
Web Components Angular React
Multiple apps as components POC
Stars: β 64 (-31.18%)
Mutual labels: custom-elements
web-vitals-element
Bring web vitals quickly into your page using custom elements
Basic usage
<!-- Include the custom element script -->
<!-- Unstyled (installed locally) -->
<script src="node_modules/web-vitals-element/dist/web-vitals-element.min.js"></script>
<!-- Unstyled from unpkg.com -->
<script src="https://unpkg.com/[email protected]/dist/web-vitals-element.min.js"></script>
<!-- Styled (installed locally) -->
<script src="node_modules/web-vitals-element/dist/web-vitals-element.styled.min.js"></script>
<!-- Styled from unpkg.com -->
<script src="https://unpkg.com/[email protected]/dist/web-vitals-element.styled.min.js"></script>
The element does not render shadow DOM. You can style it like any other element in your HTML page.
After loading the element script, use the web-vitals element in your HTML.
<!-- Basic usage -->
<web-vitals></web-vitals>
<!-- Define the metrics you care about -->
<web-vitals cls fcp fid lcp ttfb></web-vitals>
<!-- Show message about not support metrics -->
<web-vitals show-unsupported></web-vitals>
Currently supported metrics: cls, fcp, fid, lcp, ttfb. Read more about these in the web-vitals documentation.
Contributing
I'd love to see more themes for the web vitals element box β the fancier the better! If you're interested in contributing some fancy looks, please open an issue.
Code of conduct
This project underlies a code of conduct.
License
This project is released under MIT license.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].