SolidJSS
SolidJS•3y ago•
11 replies
DaOfficialWizard🧙

Help with Forward Ref and Ref from solid-primatives

I am still pretty new to solidjs and typescipt in general, i am trying to port a library from react to solid and am 90% of the way there - however i am having difficulties with using a forward Ref.

There are two sections that are confusing me - that i would like help trying to solve.

Chart.tsx
function ChartComponent<
    TType extends ChartType = ChartType,
    TData = DefaultDataPoint<TType>,
    TLabel = unknown,
>(props: ChartProps<TType, TData, TLabel>, ref: Ref<ChartJS<TType, TData, TLabel> | null>) {
  // some component logic
}

export const Chart = forwardRef(ChartComponent) as BaseChartComponent;

And
typedCharts.tsx
import {
    Chart as ChartJS,
    LineController,
    BarController,
    RadarController,
    DoughnutController,
    PolarAreaController,
    BubbleController,
    PieController,
    ScatterController,
} from 'chart.js'
import { Chart } from './chart'
import type { ChartProps, ChartJSOrUndefined, TypedChartComponent } from './types'
import type { ChartType, ChartComponentLike } from 'chart.js'

function createTypedChart<T extends ChartType>(type: T, registerables: ChartComponentLike) {
    ChartJS.register(registerables)

    return forwardRef<ChartJSOrUndefined<T>, Omit<ChartProps<T>, 'type'>>((props, ref) => (
        <Chart {...props} ref={ref} type={type} />
    )) as TypedChartComponent<T>
}

export const Line = /* #__PURE__ */ createTypedChart('line', LineController)


I am not exactly sure how to solve the forwardRef situation here.
Was this page helpful?