{"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.","language":"javascript","status":"abandoned","last_verified":"Sun Apr 19","install":{"commands":["npm install react-trend"],"cli":null},"imports":["import Trend from 'react-trend';","const Trend = require('react-trend');"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}