plotly.js react wrapper component (TypeScript, Functional Component, react-plotly.js alternative)

Chart.tsx

import React from "react";
import Plotly from "plotly.js/dist/plotly";
export interface ChartProps {
  data?: Plotly.Data[];
  layout: Partial<Plotly.Layout>;
  frames?: Plotly.Frame[];
  config?: Partial<Plotly.Config>;

  // react-specific
  style?: React.CSSProperties;
}

export const Chart: React.FC<ChartProps> = ({
  style = {},
  data,
  ...props
}) => {
  const ref = React.useRef<HTMLDivElement>(null);
  React.useEffect(() => {
    Plotly.react(ref.current, { data, ...props });
  }, [props, data]);

  return <div ref={ref} style={style} />;
};

custom.d.ts

declare module "plotly.js/dist/plotly" {
  export { Plotly as default } from "plotly.js";
}

I made an issue for this at plotly/react-plotly.js#226

No need for resizeHandler as that's already in plotly.js as of plotly/plotly.js#2974 / Sep 7, 2018 / v1.41.0 / plotly/plotly.js@cfc720b by config = {{ responsive: true }}