{"id":19356935,"url":"https://github.com/alexfigliolia/metrics-queue-react","last_synced_at":"2026-05-15T22:02:54.861Z","repository":{"id":57687483,"uuid":"493439209","full_name":"alexfigliolia/metrics-queue-react","owner":"alexfigliolia","description":"React utilities for interfacing with the Metrics Queue","archived":false,"fork":false,"pushed_at":"2022-05-22T05:45:13.000Z","size":202,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-06T17:50:44.997Z","etag":null,"topics":["performance","performance-metrics","performance-tools","performance-tuning","react"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/metrics-queue-react","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexfigliolia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-17T23:04:47.000Z","updated_at":"2024-09-30T13:06:23.000Z","dependencies_parsed_at":"2022-08-25T17:53:45.784Z","dependency_job_id":null,"html_url":"https://github.com/alexfigliolia/metrics-queue-react","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexfigliolia%2Fmetrics-queue-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexfigliolia%2Fmetrics-queue-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexfigliolia%2Fmetrics-queue-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexfigliolia%2Fmetrics-queue-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexfigliolia","download_url":"https://codeload.github.com/alexfigliolia/metrics-queue-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240473336,"owners_count":19807120,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["performance","performance-metrics","performance-tools","performance-tuning","react"],"created_at":"2024-11-10T07:05:52.560Z","updated_at":"2025-10-08T20:02:51.466Z","avatar_url":"https://github.com/alexfigliolia.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Metrics Queue React\n\nThis library exposes some React utilities that make common [Metrics Queue](https://github.com/alexfigliolia/metrics-queue#readme) operations easy and reuseable.\n\n## Installation\n\n```bash\nyarn add metrics-queue metrics-queue-react\n# or\nbolt add metrics-queue metrics-queue-react\n# or\nnpm i -S metrics-queue metrics-queue-react\n```\n\nInitialize the `MetricsQueue` to enable subscribing to performance marks and measures:\n\n```JavaScript\nimport { MetricsQueue } from \"metrics-queue\";\n\nMetricsQueue.init();\n// Off to the races!\n```\n\nFor a more in-depth set configuration options please head over to the `MetricsQueue`'s [documentation](https://github.com/alexfigliolia/metrics-queue#readme)\n\n## React Utilities\n\n### MetricSubscriber\n\nConditionally render based on the status of a performance metric:\n\n```JavaScript\n// Somewhere in your application code:\nperformance.mark(\"first-render\");\n\n// In your UI modules:\nimport { MetricSubscriber } from \"metrics-queue-react\";\nimport { AsyncComponent } from \"./your/async/component\"\n\nexport const AwesomeComponent = () =\u003e (\n  \u003cMetricSubscriber markOrMeasure=\"first-render\"\u003e\n    {eventReached =\u003e {\n      if(!eventReached) return \u003cLoading /\u003e\n\n      return \u003cAsyncComponent /\u003e\n    }}\n  \u003c/MetricSubscriber\u003e\n);\n```\n\nIn the use case above, `AsyncComponent` can be any expensive-to-render component or asynchronous import that resolves to a component. It can also be any secondary experience that can be deferred until after the `\"first-render\"` mark.\n\n### useMetricSubscription\n\nFor a more minimal approach, this package also exposes a hook:\n\n```JavaScript\nimport { useMetricSubscription } from \"metrics-queue-react\";\n\nexport const AwesomeComponent = () =\u003e {\n  const eventReached = useMetricSubscription(\"your_mark_or_measure\");\n\n  if(!eventReached) return null; // Or a spinner, or whatever makes you happy today\n\n  return \u003cSomeExpensiveOrAsyncComponent /\u003e\n}\n```\n\nThe `useMetricSubscription` hook can receive an optional callback to execute once `\"your_mark_or_measure\"` is reached:\n\n```JavaScript\nimport { useMetricSubscription } from \"metrics-queue-react\";\n\nexport const AwesomeComponent = () =\u003e {\n  const eventReached = useMetricSubscription(\n    \"your_mark_or_measure\",\n    (measure) =\u003e {\n      console.log(\"Event reached at\", measure.duration);\n    }\n  );\n\n  if(!eventReached) return null; // Or a spinner, or whatever makes you happy today\n\n  return \u003cSomeExpensiveOrAsyncComponent /\u003e\n}\n```\n\n### useMetricSubscriptionModule\n\nSimilar to `useMetricSubscription`, this hook is designed to resolve asynchronous imports once a metric is reached:\n\n```JavaScript\nimport React from \"react\";\nimport { useMetricSubscriptionModule } from \"metrics-queue-react\";\nimport Spinner from \"ui-library\";\n\n// Define an async function that returns a Component\nconst loadModule = async () =\u003e {\n  return (await import(\"./ExpensiveModule\")).ExpensiveModule\n});\n\n// Define your component\nexport const LoadAfterMetric = (props = {}) =\u003e {\n  // Load the component after a feature's first meaningful paint\n  const [reachedFMP, AsyncComponent] = useMetricSubscriptionModule(\n   \"first-meaningful-paint\",\n    loadModule\n  );\n\n  if(reachedFMP) {\n    // Render your after-FMP Component\n    return \u003cAsyncComponent {...props}/\u003e\n  }\n  // Provide a fallback or null until FMP is reached\n  return \u003cSpinner /\u003e;\n};\n```\n\n### MetricProvider\n\nWe know that with the Performance API, defining marks and measures are simple one-liners:\n\n```JavaScript\nperformance.mark(\"example-mark\");\n// or\nperformance.measure(\"example-measure\");\n```\n\nHowever, if you'd like to use something a little more React-flavored, this package has some Providers that you can place in your react tree. The `MetricProvider` will make a call to the Performance API as soon as it mounts:\n\n```JavaScript\nimport { MetricProvider } from \"metrics-queue-react\";\n\nconst MakePerformanceMark = () =\u003e {\n  return (\n      \u003cMetricProvider\n        type=\"mark\"\n        event=\"feature-first-paint\" /\u003e\n  );\n}\n\nconst MakePerformanceMeasure = () =\u003e {\n  return (\n      \u003cMetricProvider\n        type=\"measure\"\n        event=\"feature-interactive\"\n        startOrMeasureOptions=\"feature-first-paint\" /\u003e\n  );\n}\n```\n\nThe `MetricProviders` above will call:\n\n```JavaScript\nperformance.mark(\"feature-first-paint\");\n// And\nperformance.measure(\"feature-interactive\", \"feature-first-paint\");\n```\n\nas soon as they mount.\n\n#### MetricProviders with `MetricsQueue` plugins\n\n```JavaScript\nimport { MetricProvider } from \"metrics-queue-react\"\nimport { createPerfMetric } from \"example-perf-lib\";\n\nconst metric = createPerfMetric(\"example-metric\");\n\nconst MakeCustomPerfLibMetric = () =\u003e {\n  return (\n      \u003cMetricProvider\n        type=\"plugin\"\n        event=\"example-metric\"\n        metric={metric}\n        metricStop={() =\u003e metric.stop()} /\u003e\n  );\n}\n```\n\nUnder the hood, the `MetricProvider` in the above example will call:\n\n```JavaScript\n// Mark the stoptime of the metric\nmetric.stop()\nMetricsQueue.plugins[\"your-plugin-name\"](\"example-metric\", metric);\n// This will execute all event listeners on \"example-metric\"\n```\n\nas soon as it mounts. It will also automatically emit events on the correct plugin without you having to specify `\"your-plugin-name\"` as a prop.\n\n## Contributing\n\nAll contributions and PR's are welcome for this project. If you'd like support for another UI library, please raise an issue or create an NPM package under the name `metrics-queue/new-ui-lib`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexfigliolia%2Fmetrics-queue-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexfigliolia%2Fmetrics-queue-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexfigliolia%2Fmetrics-queue-react/lists"}