Register Custom Code / Functions in ActiveReportsJS React

Register Custom Code / Functions in ActiveReportsJS React

Posted by: blagoja.blazevski on 21 January 2026, 6:31 am EST

• 

  blagoja.blazevski

  • Post Options:
  • Link
    Copy

  Posted 21 January 2026, 6:31 am EST

  The Custom Code section under Advanced Topics only documents usage for @mescius/activereportsjs.

  What is the correct approach when using @mescius/activereportsjs-react?

  Can custom code/functions be registered directly when using the React wrapper, or is it still required to install @mescius/activereportsjs separately and register the custom code there?

  Clarification on the recommended setup and any React-specific considerations would be appreciated.

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 22 January 2026, 5:51 am EST

  Hi,

  Regarding “Custom Code with @mescius/activereportsjs-react”, You’re correct in noticing that the documentation examples reference @mescius/activereportsjs. However, the same approach applies when using the React wrapper.

  Some points:

  Package Structure

  • @mescius/activereportsjs-react is a React wrapper built on top of @mescius/activereportsjs

  • Installing the React package automatically installs the core package as a dependency

  • All core features—including custom code registration—are provided by @mescius/activereportsjs

  So, You do not need to install @mescius/activereportsjs separately. Installing the React package is sufficient:

  Registering Custom Code in a React Application

  Custom code is registered exactly as described in the documentation, using the core API:

  import { CustomCode } from "@mescius/activereports/core";
  
  const customCode = [
    {
      name: "FormatCurrencyValue",
      body: function (value) {
        const currencySymbol = "$";
        if (value >= 1_000_000_000) {
          return currencySymbol + (value / 1_000_000_000).toFixed(1) + "B";
        } else if (value >= 1_000_000) {
          return currencySymbol + (value / 1_000_000).toFixed(1) + "M";
        } else if (value >= 1_000) {
          return currencySymbol + (value / 1_000).toFixed(1) + "K";
        } else {
          return currencySymbol + value.toFixed(1);
        }
      },
      info: {
        description: "Formats a number as currency based on magnitude",
        example: "Code.FormatCurrencyValue(Sum(SalesAmount))",
        syntax: "Code.FormatCurrencyValue(<number>)"
      }
    }
  ];
  
  // Register once at application startup
  CustomCode.registerFunctions(customCode);

  Recommended Setup for React

  Register your custom functions early in the application lifecycle, typically in the app entry point or a top-level component:

  import React, { useEffect } from "react";
  import { CustomCode } from "@mescius/activereports/core";
  import { Viewer } from "@mescius/activereportsjs-react";
  
  function App() {
    useEffect(() => {
      // Register custom code once
      CustomCode.registerFunctions(customCode);
    }, []);
  
    return (
      <div id="viewer-host">
        <Viewer report={{ Uri: "report.rdlx-json" }} />
      </div>
    );
  }
  
  export default App;

  React-Specific Considerations:

  Global registration
  
  Once registered using CustomCode.registerFunctions(), the functions are available to all reports across the application.

  No React-specific API required
  
  The and components automatically recognize registered custom code.

  Register once only
  
  Avoid duplicate registrations. Use a single initialization point (such as useEffect with an empty dependency array or a dedicated startup file).

  References:

  React Integration:
  
  https://developer.mescius.com/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Integration/React-Component

  Custom Code API:
  
  https://developer.mescius.com/activereportsjs/api/modules/Core#customcode

  Custom Code Guide:
  
  https://developer.mescius.com/activereportsjs/docs/DeveloperGuide/advanced/custom-code

  Regards,
  
  Priyam