victory-canvas/es/canvas-curve.js

HTML5 Canvas Components for Victory

import React from "react";
import { LineHelpers } from "victory-core";
import { useCanvasContext } from "./hooks/use-canvas-context";
export const CanvasCurve = props => {
  const {
    canvasRef,
    clear,
    clip
  } = useCanvasContext();
  const {
    style,
    data
  } = props;
  const {
    stroke,
    strokeWidth
  } = style;
  const draw = React.useCallback(ctx => {
    const line = LineHelpers.getLineFunction(props);
    ctx.strokeStyle = stroke;
    ctx.lineWidth = strokeWidth;
    line.context(ctx)(data);
    ctx.stroke();
  }, [data, props, stroke, strokeWidth]);
  React.useEffect(() => {
    const ctx = canvasRef.current?.getContext("2d");
    if (!ctx) return;
    clear(ctx);
    draw(ctx);
    clip(ctx);
  }, [canvasRef, draw, clear, clip]);
  return null;
};