diff --git a/README.md b/README.md index 60d531401..6b70e7a58 100644 --- a/README.md +++ b/README.md @@ -55,6 +55,12 @@ See [these examples](example) for more information getElementsAtEvent?: (elements: Chart.InteractionItem[], event: React.MouseEvent) => void; ``` +In TypeScript, you can import chart props types like this: + +```ts +import type { ChartProps } from 'react-chartjs-2'; +``` + #### id Type `string` diff --git a/src/chart.tsx b/src/chart.tsx index 754178902..7081dd7e4 100644 --- a/src/chart.tsx +++ b/src/chart.tsx @@ -3,7 +3,7 @@ import type { ForwardedRef, MouseEvent } from 'react'; import ChartJS from 'chart.js/auto'; import type { ChartData, ChartType, DefaultDataPoint } from 'chart.js'; -import type { Props, TypedChartComponent } from './types'; +import type { ChartProps, TypedChartComponent } from './types'; import { reforwardRef, cloneData, @@ -35,7 +35,7 @@ function ChartComponent< fallbackContent, onClick: onClickProp, ...props - }: Props, + }: ChartProps, ref: ForwardedRef> ) { type TypedChartJS = ChartJS; diff --git a/src/index.tsx b/src/index.tsx index 377d0a09e..9d04067d4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,4 +4,5 @@ export { defaults } from 'chart.js'; // @todo Make named export instead of default export { Chart as default } from './chart'; +export type { ChartProps } from './types'; export * from './typedCharts'; diff --git a/src/typedCharts.tsx b/src/typedCharts.tsx index da17a7d86..1fcb230ef 100644 --- a/src/typedCharts.tsx +++ b/src/typedCharts.tsx @@ -1,11 +1,11 @@ import React, { forwardRef } from 'react'; import { ChartType } from 'chart.js'; -import { Props, ChartJSOrUndefined, TypedChartComponent } from './types'; +import { ChartProps, ChartJSOrUndefined, TypedChartComponent } from './types'; import { Chart } from './chart'; function createTypedChart(type: T) { - return forwardRef, Omit, 'type'>>( + return forwardRef, Omit, 'type'>>( (props, ref) => ) as TypedChartComponent; } diff --git a/src/types.ts b/src/types.ts index 7618283df..faa8212a4 100644 --- a/src/types.ts +++ b/src/types.ts @@ -14,7 +14,7 @@ import type { InteractionItem, } from 'chart.js'; -export interface Props< +export interface ChartProps< TType extends ChartType = ChartType, TData = DefaultDataPoint, TLabel = unknown @@ -61,7 +61,7 @@ export type TypedChartComponent< TOmitType = false > = TOmitType extends true ? , TLabel = unknown>( - props: Omit, 'type'> & { + props: Omit, 'type'> & { ref?: ForwardedRef>; } ) => JSX.Element @@ -70,7 +70,7 @@ export type TypedChartComponent< TData = DefaultDataPoint, TLabel = unknown >( - props: Props & { + props: ChartProps & { ref?: ForwardedRef>; } ) => JSX.Element;