Installation in React

Prerequisites

• Follow the instructions on the Authentication page to get your access token.
• You should also have Node.js and npm installed.

Installation

Node Package Manager can be used to install Visualizations. To do so, run the following command(s) in your terminal:

// with yarn
yarn add @railzai/railz-visualizations

// with npm
npm install @railzai/railz-visualizations --save

📘

Why Stencil?

Stencil is used by the Visualizations SDK to compile our components into Web components and the steps below illustrate how to set it up using various frameworks.

Installation Steps for React Versions 17.0.0+

Accounting Data as a Service™ Visualizations can be quickly integrated into your React project. The @railzai/railz-visualizations-react package is the recommended way to use Visualizations' components in React. This package provides React wrappers for Visualizations' Web Components, allowing for close integration with React features.

1. Run the following command to install the package.

// with yarn
yarn add @railzai/railz-visualizations-react

// with npm
npm install @railzai/railz-visualizations-react --save

Installation Steps for React Versions below 17.0.0

For React versions before 17.0.0, you can use Visualizations using web component tags. Please visit the Visualization Components page for instructions on how to import each component.

1. Use defineCustomElements() by creating a file in your src directory and paste the below into it.

import { HTMLAttributes } from "react";
import {
  applyPolyfills,
  defineCustomElements,
} from "@railzai/railz-visualizations/dist/loader";
import { JSX as LocalJSX } from "@railzai/railz-visualizations";

type StencilToReact<T> = {
  [P in keyof T]?: T[P] &
    Omit<HTMLAttributes<Element>, "className"> & {
      class?: string;
    };
};

declare global {
  export namespace JSX {
    interface IntrinsicElements
      extends StencilToReact<LocalJSX.IntrinsicElements> {
      [elemName: string]: any;
    }
  }
}

defineCustomElements(window);

applyPolyfills().then(() => {
  defineCustomElements();
});

2. Import the file into your React entry file.

import "./register-web-components";

Basic Usage

To get you started here's a brief example that'll do the trick.