React Forecasting Component, Live Demo

Add forecasting to a React app with a single component. @datastripes/forecast/react renders historical data, a forecast horizon, and confidence bands out of the box, powered by the same Forecasting Widget engine used by the Vue, Angular, and vanilla JS builds of Datastripes, so the behavior (and the forecast numbers) are identical no matter which frontend framework your app is built with.

The demo below is not a screenshot: it's the real DatastripesForecast component from @datastripes/forecast/react, mounted live on this page with ReactDOM.createRoot. VitePress pages are Vue single-file components, but a <script setup> block can still import arbitrary npm packages, including React itself, and imperatively mount a React tree into a plain DOM node.

Source

import { DatastripesForecast } from '@datastripes/forecast/react';

const rows = [
  { date: '2024-01-01', value: 102 },
  { date: '2024-01-02', value: 108 },
  { date: '2024-01-03', value: 99 }
  // ...
];

export function ForecastDemo() {
  return (
    <DatastripesForecast
      data={rows}
      algorithm="prophet_lite"
      horizon={14}
      theme="dark"
      view="composite"
    />
  );
}

For more React-adjacent patterns, see What-if scenarios (re-forecasting as the input data changes) and Headless mode (the useWasmForecast hook with your own UI).