React Trend Component

1.2.5 · abandoned · verified Sun Apr 19

react-trend is a lightweight React component designed to render simple, scalable SVG sparkline-style trend graphs. Unlike complex charting libraries, it focuses on doing one thing well: creating elegant visualizations like those seen on GitHub or Twitter for activity feeds. It supports data as arrays of numbers or objects, offers gradient and smoothing options, and includes an auto-draw animation feature. The component renders directly to SVG, ensuring crisp visuals at any scale. While its latest stable version is 1.2.5, released over six years ago, it remains functional for basic use cases in older React environments. The project is effectively abandoned, with no recent updates or maintenance, meaning it may not be compatible with modern React versions (17+) or features like Strict Mode or Concurrent Mode, and lacks ongoing security patches. It is zero-dependency beyond React itself.

Common errors

```
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
```
cause Using `react-trend` in React's Strict Mode or with newer React versions (17+) may trigger this error due to outdated lifecycle method usage or patterns that are incompatible with modern React's stricter rendering behavior.

fix This issue often indicates fundamental incompatibility with newer React versions. The recommended fix is to migrate to an actively maintained charting library. If migration is not an option, you might try disabling Strict Mode, but this is a workaround, not a solution.
```
TypeError: Cannot read properties of undefined (reading 'map')
```
cause The `data` prop was passed as `null`, `undefined`, or a non-array value, leading to a JavaScript runtime error when `react-trend` attempts to iterate over it.

fix Ensure the `data` prop always receives an array of numbers or objects (as of v1.2.0), e.g., `<Trend data={[1, 2, 3]} />` or `<Trend data={[{ value: 1 }, { value: 2 }]} />`.
```
Visual glitch: Trend line appears flat or incorrect when all data points have the same value, or with a single data point.
```
cause This was a known bug in `react-trend` versions prior to `v1.2.2` (for same-value datasets) and `v1.2.3` (for single-value datasets with gradients).

fix Upgrade to `react-trend` version `1.2.3` or higher to resolve issues with single-value or same-value datasets. Note that the project is abandoned, so newer versions are unlikely.

Warnings

breaking The `react-trend` library is effectively abandoned, with its last release (v1.2.5) over six years ago. It has not been updated to support modern React versions (React 17, 18, etc.) and may exhibit compatibility issues or errors, particularly in React's Strict Mode or with new lifecycle methods. Use in new projects or with recent React versions is strongly discouraged.
Fix: Consider alternative, actively maintained sparkline or charting libraries if targeting modern React environments. If you must use it, thoroughly test compatibility and be prepared for runtime errors.
gotcha When the `autoDraw` prop is enabled, it internally uses SVG's `strokeDasharray` and `strokeDashoffset` properties to perform the animation. Any custom values you provide for these two specific SVG props will be ignored when `autoDraw` is `true`.
Fix: If you need custom `strokeDasharray` or `strokeDashoffset` values, ensure `autoDraw` is set to `false`. Otherwise, let `autoDraw` control these properties for animation.
gotcha Since React 15.5, `prop-types` was externalized into a separate package. `react-trend` v1.2.4 switched to using the standalone `prop-types` package. While `react-trend` handles this internally, developers on very old React setups or specific build configurations might encounter warnings or issues if their overall environment isn't aligned with `prop-types` best practices.
Fix: Ensure your project uses a compatible version of React (typically >=15.5) and that `prop-types` is correctly resolved by your package manager/bundler. For optimal compatibility, use an actively maintained charting solution.

Install

npm install react-trend npm
yarn add react-trend yarn
pnpm add react-trend pnpm

Imports

Trend

wrong:

import { Trend } from 'react-trend';

correct:

import Trend from 'react-trend';

The component is exported as a default export.

Trend (CommonJS)
wrong:
```
const { Trend } = require('react-trend');
```
correct:
```
const Trend = require('react-trend');
```
CommonJS require pattern for Node.js environments.

Quickstart

Demonstrates a basic trend graph with animation, smoothing, and a multi-color gradient.

import React from 'react';
import Trend from 'react-trend';

const App = () => (
  <div style={{ width: '300px', height: '100px', border: '1px solid #ccc', padding: '10px' }}>
    <h2>Website Traffic Trend</h2>
    <Trend
      data={[0, 10, 5, 22, 3.6, 11, 15, 8, 20]}
      autoDraw
      autoDrawDuration={2000}
      autoDrawEasing="ease-out"
      smooth
      gradient={['#00c6ff', '#F0F', '#FF0']}
      radius={10}
      strokeWidth={3}
      strokeLinecap={'round'}
    />
    <p>Showing recent activity.</p>
  </div>
);

export default App;

view raw JSON →