{"id":11895,"library":"react-trend","title":"React Trend Component","description":"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.","status":"abandoned","version":"1.2.5","language":"javascript","source_language":"en","source_url":"https://github.com/unsplash/react-trend","tags":["javascript","react-component","react","trend","svg","graph","data-visualization"],"install":[{"cmd":"npm install react-trend","lang":"bash","label":"npm"},{"cmd":"yarn add react-trend","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-trend","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for the React component.","package":"react","optional":false}],"imports":[{"note":"The component is exported as a default export.","wrong":"import { Trend } from 'react-trend';","symbol":"Trend","correct":"import Trend from 'react-trend';"},{"note":"CommonJS require pattern for Node.js environments.","wrong":"const { Trend } = require('react-trend');","symbol":"Trend (CommonJS)","correct":"const Trend = require('react-trend');"}],"quickstart":{"code":"import React from 'react';\nimport Trend from 'react-trend';\n\nconst App = () => (\n  <div style={{ width: '300px', height: '100px', border: '1px solid #ccc', padding: '10px' }}>\n    <h2>Website Traffic Trend</h2>\n    <Trend\n      data={[0, 10, 5, 22, 3.6, 11, 15, 8, 20]}\n      autoDraw\n      autoDrawDuration={2000}\n      autoDrawEasing=\"ease-out\"\n      smooth\n      gradient={['#00c6ff', '#F0F', '#FF0']}\n      radius={10}\n      strokeWidth={3}\n      strokeLinecap={'round'}\n    />\n    <p>Showing recent activity.</p>\n  </div>\n);\n\nexport default App;\n","lang":"javascript","description":"Demonstrates a basic trend graph with animation, smoothing, and a multi-color gradient."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=1.2.5"},{"fix":"If you need custom `strokeDasharray` or `strokeDashoffset` values, ensure `autoDraw` is set to `false`. Otherwise, let `autoDraw` control these properties for animation.","message":"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`.","severity":"gotcha","affected_versions":">=1.1.1"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.2.4"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","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.","error":"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."},{"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 }]} />`.","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.","error":"TypeError: Cannot read properties of undefined (reading 'map')"},{"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.","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).","error":"Visual glitch: Trend line appears flat or incorrect when all data points have the same value, or with a single data point."}],"ecosystem":"npm"}