react-trend

library1.2.5jsnpmunverified

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.

web-framework

npm install react-trend

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-TREND

react-trend

web-frameworkjavascriptv1.2.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Trend

✓ import Trend from 'react-trend';

✗ import { Trend } from 'react-trend';

The component is exported as a default export.

Trend (CommonJS)

✓ const Trend = require('react-trend');

✗ const { Trend } = require('react-trend');

CommonJS require pattern for Node.js environments.

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;

Debug

Known issues

breakingThe `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.

affects: >=1.2.5

gotchaWhen 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.

affects: >=1.1.1

gotchaSince 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.

affects: >=1.2.4

Errors

Common errors & fixes

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.

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')

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.

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.

Upgrade

Version history

1.2.5latest on npm

Audit

Dependencies

reactrequiredPeer dependency for the React component.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/unsplash/react-trend ↗

packagehttps://www.npmjs.com/package/react-trend ↗