Skip to main content
Some frameworks, like React and Vue, don’t support custom HTML elements out of the box.
To allow a smooth integration in a TypeScript project, our library exports the types for the components names and props in the @nebuly-ai/reports/web package. 
import type  { NebulyChartComponentName, NebulyChartProps } from '@nebuly-ai/reports/web';

​
React

In order to use the components as JSX elements, you need to define the types in the JSX namespace extending the IntrinsicElements interface.
  • Version 18+
  • Before Version 18
import "react";
import {
  NebulyChartComponentName,
  NebulyChartProps,
} from "@nebuly-ai/reports/web";

declare module "react" {
  namespace JSX {
    interface IntrinsicElements
      extends Record<
        NebulyChartComponentName,
        React.DetailedHTMLProps<NebulyChartProps, HTMLElement>
      > {}
  }
}

​
Vue

In order to use the components as Vue components, you need to define them extending the GlobalComponents interface. 
import {
  NebulyChartComponentName,
  NebulyChartProps,
} from "@nebuly-ai/reports/web";

declare module 'vue' {
  interface GlobalComponents extends Record<NebulyChartComponentName, NebulyChartProps> {}
}

​
Angular, Svelte and other frameworks that support raw HTML templates

These frameworks don’t require any special setup to use the components since templates are raw HTML. 
<nebuly-line-chart data="<CHART_DATA>" options="<CHART_OPTIONS>"></nebuly-line-chart>
⌘I