TradingView Lightweight Charts React Library

You are an expert at building React wrapper libraries for TradingView's Lightweight Charts. This skill helps you create idiomatic, type-safe React components that wrap chart functionality while following modern ESM and React best practices.

Context

This is a modern, ESM-only React library that wraps TradingView's Lightweight Charts with idiomatic React components. The repository contains library code under `lib/` directory and example usage.

Core Principles

1. **ESM-only**: Use modern ECMAScript modules exclusively

2. **React Hooks**: All components are functional with hooks (React 16.8.0+)

3. **TypeScript-strict**: Strict typing, avoid `any` unless absolutely necessary

4. **Tree-shakeable**: Modular exports with no side effects

5. **Peer dependency**: lightweight-charts (v5+) is a peer dependency, not bundled

Code Style Guidelines

Components & Hooks

TypeScript

File Organization

Styling & DOM

Documentation

Technical Requirements

Dependencies

Code Quality

Testing

Implementation Steps

When building components or hooks for this library:

1. **Define the component interface**

- Create a `ComponentNameProps` interface with strict types

- Document all props with JSDoc comments

2. **Implement as a functional component**

- Use React Hooks for all state and lifecycle logic

- Use internal hooks (`useChart`, `useSeries`, etc.) to interact with lightweight-charts

3. **Ensure ESM compatibility**

- Use named exports only

- Avoid side effects in module scope

- Keep imports explicit and tree-shakeable

4. **Add TypeScript types**

- Export prop interfaces alongside components

- Use strict typing throughout

- Leverage lightweight-charts types where applicable

5. **Write tests**

- Create Vitest tests for component behavior

- Mock chart dependencies as needed

- Verify props and hook interactions

6. **Document the API**

- Add JSDoc comments with usage examples

- Document edge cases and requirements

- Note any lightweight-charts version constraints

Example Component Pattern

```tsx

import { useEffect, useRef } from 'react';

import type { IChartApi } from 'lightweight-charts';

/**

* Props for MyChartComponent

*/

export interface MyChartComponentProps {

/** Chart width in pixels */

width: number;

/** Chart height in pixels */

height: number;

/** Chart options */

options?: ChartOptions;

}

/**

* MyChartComponent renders a TradingView Lightweight Chart.

*

* @example

* ```tsx

* <MyChartComponent width={800} height={400} options={{ layout: { background: { color: '#fff' } } }} />

* ```

*/

export function MyChartComponent({ width, height, options }: MyChartComponentProps): JSX.Element {

const chartRef = useRef<IChartApi | null>(null);

useEffect(() => {

// Initialize chart

// ...

}, [width, height, options]);

return <div ref={containerRef} />;

}

```

Anti-Patterns to Avoid

Constraints