#Install @axiomhq/react library

1. In your terminal, go to the root folder of your React app and run the following command:

   npm install --save @axiomhq/logging @axiomhq/react

2. Create a Logger instance and export the utils. The example below uses the useLogger and WebVitals components.

   'use client';
    
   import { Logger, AxiomJSTransport } from '@axiomhq/logging';
   import { Axiom } from '@axiomhq/js';
   import { createUseLogger, createWebVitalsComponent } from '@axiomhq/react';
    
   const axiomClient = new Axiom({
     token: process.env.AXIOM_TOKEN!,
   });
    
   export const logger = new Logger({
     transports: [
       new AxiomJSTransport({
         axiom: axiomClient,
         dataset: process.env.AXIOM_DATASET!,
       }),
     ],
   });
    
   const useLogger = createUseLogger(logger);
   const WebVitals = createWebVitalsComponent(logger);
    
   export { useLogger, WebVitals };

#Send logs from components

To send logs from components, use the useLogger hook that returns your logger instance.

import { useLogger } from "@/lib/axiom/client";
import { useEffect } from "react";
 
export default function ClientComponent() {
  const log = useLogger();
  const handleClick = () => log.info("User logged out");
 
  useEffect(() => {
    log.info("User logged in", { userId: 42 });
  }, []);
 
  return (
    <div>
      <h1>Logged in</h1>
      <button onClick={handleClick}>Log out</button>
    </div>
  );
}

#Send Web Vitals

To send Web Vitals, mount the WebVitals component in the root of your React app.

import { WebVitals } from "@/lib/axiom/client";
 
export default function App({ children }: { children: React.ReactNode }) {
  return (
    <main>
      <WebVitals />
      {children}
    </main>
  );
}