Skip to content

Commit

Permalink
feat: export chart props types (#810)
Browse files Browse the repository at this point in the history
  • Loading branch information
dangreen committed Oct 26, 2021
1 parent 6fc5e98 commit 82ab334
Show file tree
Hide file tree
Showing 5 changed files with 14 additions and 7 deletions.
6 changes: 6 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,12 @@ See [these examples](example) for more information
getElementsAtEvent?: (elements: Chart.InteractionItem[], event: React.MouseEvent<HTMLCanvasElement>) => void;
```

In TypeScript, you can import chart props types like this:

```ts
import type { ChartProps } from 'react-chartjs-2';
```

#### id

Type `string`
Expand Down
4 changes: 2 additions & 2 deletions src/chart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -35,7 +35,7 @@ function ChartComponent<
fallbackContent,
onClick: onClickProp,
...props
}: Props<TType, TData, TLabel>,
}: ChartProps<TType, TData, TLabel>,
ref: ForwardedRef<ChartJS<TType, TData, TLabel>>
) {
type TypedChartJS = ChartJS<TType, TData, TLabel>;
Expand Down
1 change: 1 addition & 0 deletions src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
4 changes: 2 additions & 2 deletions src/typedCharts.tsx
Original file line number Diff line number Diff line change
@@ -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<T extends ChartType>(type: T) {
return forwardRef<ChartJSOrUndefined<T>, Omit<Props<T>, 'type'>>(
return forwardRef<ChartJSOrUndefined<T>, Omit<ChartProps<T>, 'type'>>(
(props, ref) => <Chart {...props} ref={ref} type={type} />
) as TypedChartComponent<T, true>;
}
Expand Down
6 changes: 3 additions & 3 deletions src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import type {
InteractionItem,
} from 'chart.js';

export interface Props<
export interface ChartProps<
TType extends ChartType = ChartType,
TData = DefaultDataPoint<TType>,
TLabel = unknown
Expand Down Expand Up @@ -61,7 +61,7 @@ export type TypedChartComponent<
TOmitType = false
> = TOmitType extends true
? <TData = DefaultDataPoint<TDefaultType>, TLabel = unknown>(
props: Omit<Props<TDefaultType, TData, TLabel>, 'type'> & {
props: Omit<ChartProps<TDefaultType, TData, TLabel>, 'type'> & {
ref?: ForwardedRef<ChartJSOrUndefined<TDefaultType, TData, TLabel>>;
}
) => JSX.Element
Expand All @@ -70,7 +70,7 @@ export type TypedChartComponent<
TData = DefaultDataPoint<TType>,
TLabel = unknown
>(
props: Props<TType, TData, TLabel> & {
props: ChartProps<TType, TData, TLabel> & {
ref?: ForwardedRef<ChartJSOrUndefined<TType, TData, TLabel>>;
}
) => JSX.Element;

0 comments on commit 82ab334

Please sign in to comment.