Skip to main content

TS-Chart-SDK: React Support with Custom Hooks

Overview​

The ts-chart-sdk is designed to seamlessly integrate with React applications, providing a robust and flexible way to manage chart contexts using custom hooks. This integration allows developers to efficiently handle chart-related functionalities, such as state management, event handling, and rendering, within their React components.

Key Features​

  • Custom Hook Integration: The SDK provides a custom hook, useChartContext, which encapsulates all necessary logic for managing chart contexts.
  • State Management: Utilizes React's state management to track and update the chart's state.
  • Event Handling: Supports registering and deregistering event listeners for various chart-related events.
  • Reactivity: Ensures that charts are re-rendered efficiently when necessary, using React's state and effect hooks.

How It Works​

Custom Hook: useChartContext​

The useChartContext hook is the core of the SDK's React integration. It manages the lifecycle of the chart context and provides a set of utilities to interact with the chart.

Parameters​

  • props: An object containing the custom chart context properties, excluding the renderChart function.

Returns​

  • ChartContextProps: An object containing the initialized state, chart model, emitter, event listener, and TSChartContext.

State Management​

The hook uses several pieces of state to manage the chart context:

  • hasInitialized: A boolean indicating whether the chart context has been initialized.
  • key: A number used to force re-rendering of the chart.
  • ctx: The current state of the custom chart context.
  • chartModel: The current chart model.

Event Handling​

The hook provides functions to register and deregister event listeners:

  • setupEventListeners: Registers listeners for chart model updates, visual property updates, data updates, and download triggers.
  • setupEventOffListeners: Deregisters the aforementioned listeners.

Initialization and Rendering​

  • initializeContext: Initializes the chart context and updates the state accordingly.
  • renderChart: Updates the key state to trigger a re-render of the chart.

Usage​

To use the useChartContext hook, import it into your React component and pass the necessary props. The hook will handle the initialization and management of the chart context, allowing you to focus on rendering and interacting with the chart.

import React from "react";
import { useChartContext } from "path/to/ts-chart-sdk";

const MyChartComponent = (props) => {
  const chartContext = useChartContext(props);

  return <div>{/* Render your chart using the chartContext values */}</div>;
};

Conclusion​

The ts-chart-sdk provides a powerful and flexible way to integrate chart functionalities into React applications. By leveraging custom hooks, the SDK simplifies the process of managing chart contexts, handling events, and ensuring efficient reactivity. This approach allows developers to build complex chart-driven applications with ease and confidence.

For more details on the react support for custom chart context u can refer to the react chart example

This documentation provides a comprehensive overview of how the `ts-chart-sdk