{"id":14884,"library":"react-sparklines-typescript","title":"React Sparklines (TypeScript Rewrite)","description":"The `react-sparklines` package (maintained by acodesmith) is a modern, TypeScript-rewritten version of the original unmaintained `react-sparklines` library. It provides a suite of React components for rendering small, expressive sparklines, including various visual elements like lines, bars, spots, reference lines, and normal bands. As of version 1.3.0, this fork actively uses modern React patterns such as functional components, and ships with comprehensive TypeScript types, offering a smaller, faster, and more actively maintained alternative to its predecessor. Its key differentiators include explicit TypeScript support, adherence to contemporary React development practices, and a focus on performance and bundle size. The release cadence is driven by ongoing modernization and bug fixes, providing a stable, up-to-date solution for compact data visualization in React applications.","status":"active","version":"1.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/acodesmith/react-sparklines-typescript","tags":["javascript","react","component","react-component","charts","sparklines","visualization","jsx","typescript"],"install":[{"cmd":"npm install react-sparklines-typescript","lang":"bash","label":"npm"},{"cmd":"yarn add react-sparklines-typescript","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-sparklines-typescript","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for rendering React components.","package":"react","optional":false},{"reason":"Peer dependency required for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"The primary container component for all sparkline visualizations. This library uses named exports.","wrong":"const Sparklines = require('react-sparklines').Sparklines;","symbol":"Sparklines","correct":"import { Sparklines } from 'react-sparklines';"},{"note":"Component to draw a line graph within the Sparklines container. All sub-components are named exports from the main package.","wrong":"import SparklinesLine from 'react-sparklines/SparklinesLine';","symbol":"SparklinesLine","correct":"import { SparklinesLine } from 'react-sparklines';"},{"note":"Component to add horizontal reference lines (e.g., mean, median, average). Avoid CommonJS `require()` as the library is ESM-first.","wrong":"const { SparklinesReferenceLine } = require('react-sparklines');","symbol":"SparklinesReferenceLine","correct":"import { SparklinesReferenceLine } from 'react-sparklines';"},{"note":"Component to draw bar charts within the Sparklines container.","symbol":"SparklinesBars","correct":"import { SparklinesBars } from 'react-sparklines';"}],"quickstart":{"code":"import React from 'react';\nimport { Sparklines, SparklinesLine, SparklinesSpots, SparklinesReferenceLine } from 'react-sparklines';\n\n// A simple functional component demonstrating sparklines\nconst MySparklineChart: React.FC = () => {\n const sampleData = [5, 10, 5, 20, 8, 15, 12, 18, 7, 13, 10, 22];\n const meanValue = sampleData.reduce((a, b) => a + b, 0) / sampleData.length;\n\n return (\n
\n

Sales Trend

\n \n \n \n \n \n

Mean: {meanValue.toFixed(2)}

\n
\n );\n};\n\nexport default MySparklineChart;\n","lang":"typescript","description":"Demonstrates how to render a basic sparkline with a line, spots, and a mean reference line using sample data, styled for clarity within a React functional component."},"warnings":[{"fix":"Review the updated API in the README and refactor any class-based components to functional components using hooks if necessary. Ensure your React version is 16.8 or newer.","message":"This `react-sparklines` package (version 1.3.0 and above, maintained by `acodesmith`) is a complete rewrite in TypeScript using modern React functional components. If you are migrating from the older `borisyankov/react-sparklines` package, expect significant API changes and ensure your codebase is compatible with modern React patterns.","severity":"breaking","affected_versions":">=1.3.0"},{"fix":"Always install using `npm install react-sparklines` or `yarn add react-sparklines` and confirm the package's `package.json` points to the `acodesmith` repository.","message":"Despite the internal or conceptual name `react-sparklines-typescript`, this library is published on npm under the name `react-sparklines`. To ensure you install this modern, TypeScript-rewritten version, install `react-sparklines` and verify the maintainer (`acodesmith`) to distinguish it from the older, unmaintained package with the same name.","severity":"gotcha","affected_versions":">=1.3.0"},{"fix":"Always use ES Module import syntax: `import { Component } from 'react-sparklines';`","message":"The library is designed for ESM (ECMAScript Modules) and modern JavaScript environments with bundlers like Webpack or Vite. While CommonJS `require()` might be polyfilled in some setups, it is not the recommended or officially supported way to import components, and may lead to issues with tree-shaking, type inference, or bundle size.","severity":"gotcha","affected_versions":">=1.3.0"},{"fix":"For responsive behavior, use `width` and `height`. For fixed pixel dimensions, use `svgWidth={100} svgHeight={20}`.","message":"The `width` and `height` props for the `Sparklines` container define the SVG viewbox dimensions, and the component will automatically scale responsively within its parent container by default. If you desire absolute pixel dimensions, you must use `svgWidth` and `svgHeight` props instead.","severity":"gotcha","affected_versions":">=1.3.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you are using named imports correctly: `import { Sparklines, SparklinesLine } from 'react-sparklines';`","cause":"This error typically indicates that a named export (like `Sparklines`) is being incorrectly imported, often by attempting a default import or a faulty CommonJS `require()` pattern in a module-aware environment.","error":"TypeError: (0 , react_sparklines__WEBPACK_IMPORTED_MODULE_2__.Sparklines) is not a function"},{"fix":"Verify that `react` and `react-dom` are installed as peer dependencies and that your project uses a modern React version (16.8 or newer). Double-check that your import paths are correct and that the component names are spelled exactly as exported: `import { Sparklines } from 'react-sparklines';`","cause":"This issue often arises when React components are not correctly imported or are used in a React version that does not support the component's underlying implementation (e.g., trying to use functional components with an ancient React setup), or if there's a module resolution problem.","error":"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)"}],"ecosystem":"npm"}