{"id":38720655,"url":"https://github.com/thbst16/react-simile-timeline","last_synced_at":"2026-01-17T11:08:39.899Z","repository":{"id":324138299,"uuid":"1092424717","full_name":"thbst16/react-simile-timeline","owner":"thbst16","description":"Modern React timeline component based on MIT's Simile Timeline. TypeScript, WCAG 2.1 AA accessible, touch-enabled, 60fps performance.   Compatible with original Simile JSON format.","archived":false,"fork":false,"pushed_at":"2025-12-19T01:42:32.000Z","size":1227,"stargazers_count":1,"open_issues_count":5,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-21T22:07:18.025Z","etag":null,"topics":["accessibility","data-visualization","events-timeline","react-component","responsive","timeline-component","typescript"],"latest_commit_sha":null,"homepage":"https://react-simile-timeline-demo.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thbst16.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-08T15:53:48.000Z","updated_at":"2025-12-19T01:42:34.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/thbst16/react-simile-timeline","commit_stats":null,"previous_names":["thbst16/react-simile-timeline"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/thbst16/react-simile-timeline","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thbst16%2Freact-simile-timeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thbst16%2Freact-simile-timeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thbst16%2Freact-simile-timeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thbst16%2Freact-simile-timeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thbst16","download_url":"https://codeload.github.com/thbst16/react-simile-timeline/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thbst16%2Freact-simile-timeline/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28506598,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T10:25:30.148Z","status":"ssl_error","status_checked_at":"2026-01-17T10:25:29.718Z","response_time":85,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","data-visualization","events-timeline","react-component","responsive","timeline-component","typescript"],"created_at":"2026-01-17T11:08:39.235Z","updated_at":"2026-01-17T11:08:39.890Z","avatar_url":"https://github.com/thbst16.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Simile Timeline\n\n[![CI](https://github.com/thbst16/react-simile-timeline/actions/workflows/ci.yml/badge.svg)](https://github.com/thbst16/react-simile-timeline/actions/workflows/ci.yml)\n[![npm version](https://img.shields.io/npm/v/react-simile-timeline.svg)](https://www.npmjs.com/package/react-simile-timeline)\n[![npm downloads](https://img.shields.io/npm/dm/react-simile-timeline.svg)](https://www.npmjs.com/package/react-simile-timeline)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue.svg)](https://www.typescriptlang.org/)\n\nA modern React implementation of the [MIT SIMILE Timeline](https://www.simile-widgets.org/timeline/) visualization component. Build beautiful, interactive timelines with ease.\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003e\n    \u003ca href=\"https://react-simile-timeline.vercel.app/\"\u003eLive Demo\u003c/a\u003e •\n    \u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e •\n    \u003ca href=\"#quick-start\"\u003eQuick Start\u003c/a\u003e •\n    \u003ca href=\"#api-reference\"\u003eAPI\u003c/a\u003e •\n    \u003ca href=\"https://github.com/thbst16/react-simile-timeline\"\u003eGitHub\u003c/a\u003e\n  \u003c/strong\u003e\n\u003c/p\u003e\n\n---\n\n## Why React Simile Timeline?\n\n| Feature | Description |\n|---------|-------------|\n| **100% Simile Compatible** | Drop-in replacement for existing Simile Timeline JSON data |\n| **High Performance** | 60+ FPS smooth scrolling with optimized rendering |\n| **Modern Stack** | Built with React 18/19, TypeScript, and hooks |\n| **Multi-Band** | Two-band, three-band, or custom configurations |\n| **Fully Themeable** | Classic, dark, and custom themes via CSS variables |\n| **Accessible** | ARIA labels, keyboard navigation, screen reader support |\n| **Lightweight** | ~12KB gzipped, zero runtime dependencies |\n\n---\n\n## Installation\n\n```bash\nnpm install react-simile-timeline\n```\n\n```bash\nyarn add react-simile-timeline\n```\n\n```bash\npnpm add react-simile-timeline\n```\n\n---\n\n## Quick Start\n\n```tsx\nimport { Timeline } from 'react-simile-timeline';\nimport 'react-simile-timeline/style.css';\n\nfunction App() {\n  const data = {\n    dateTimeFormat: 'iso8601',\n    events: [\n      { start: '2024-01-15', title: 'Project Started', color: '#4a90d9' },\n      { start: '2024-03-01', end: '2024-06-30', title: 'Development', isDuration: true, color: '#6b8e5f' },\n      { start: '2024-07-01', title: 'Launch Day', color: '#c41e3a' },\n    ],\n  };\n\n  return \u003cTimeline data={data} height={400} /\u003e;\n}\n```\n\n---\n\n## Examples\n\n### Load Data from URL\n\n```tsx\n\u003cTimeline\n  dataUrl=\"/api/events.json\"\n  height={400}\n  onEventClick={(event) =\u003e console.log(event)}\n/\u003e\n```\n\n### Hot Zones (Highlighted Periods)\n\n```tsx\n\u003cTimeline\n  data={data}\n  hotZones={[\n    {\n      start: '2024-03-01',\n      end: '2024-06-30',\n      color: 'rgba(107, 142, 95, 0.15)',\n      annotation: 'Development Sprint',\n    },\n  ]}\n  height={400}\n/\u003e\n```\n\n### Multi-Band Timeline\n\n```tsx\n\u003cTimeline\n  data={data}\n  bands={[\n    { id: 'main', height: '70%', timeUnit: 'month', intervalPixels: 100 },\n    { id: 'overview', height: '30%', timeUnit: 'year', overview: true, syncWith: 'main' },\n  ]}\n  height={400}\n/\u003e\n```\n\n### Dark Theme\n\n```tsx\n\u003cTimeline data={data} theme=\"dark\" height={400} /\u003e\n```\n\n### Custom Theme\n\n```tsx\n\u003cTimeline\n  data={data}\n  theme={{\n    name: 'ocean',\n    backgroundColor: '#0f172a',\n    eventColor: '#38bdf8',\n    eventTextColor: '#e2e8f0',\n    scaleColor: '#94a3b8',\n    gridColor: '#334155',\n  }}\n  height={400}\n/\u003e\n```\n\n---\n\n## API Reference\n\n### Timeline Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `data` | `TimelineData` | - | Inline timeline data |\n| `dataUrl` | `string` | - | URL to fetch timeline JSON |\n| `dataUrls` | `string[]` | - | Multiple URLs to fetch and merge |\n| `bands` | `BandConfig[]` | Auto | Band configuration array |\n| `hotZones` | `HotZone[]` | `[]` | Highlighted time periods |\n| `theme` | `'classic' \\| 'dark' \\| Theme` | `'classic'` | Theme configuration |\n| `centerDate` | `string \\| Date` | Median | Initial center date |\n| `width` | `string \\| number` | `'100%'` | Container width |\n| `height` | `string \\| number` | `400` | Container height |\n| `onEventClick` | `(event) =\u003e void` | - | Event click callback |\n| `onEventHover` | `(event) =\u003e void` | - | Event hover callback |\n| `branding` | `boolean \\| BrandingConfig` | - | Show watermark |\n| `className` | `string` | - | Container CSS class |\n\n### Event Properties\n\n| Property | Type | Required | Description |\n|----------|------|----------|-------------|\n| `start` | `string` | Yes | Start date (ISO 8601) |\n| `title` | `string` | Yes | Display title |\n| `end` | `string` | No | End date for duration events |\n| `description` | `string` | No | Shown in popup |\n| `isDuration` | `boolean` | No | Force duration rendering |\n| `color` | `string` | No | Background color |\n| `textColor` | `string` | No | Label text color |\n| `icon` | `string` | No | URL to custom icon |\n| `image` | `string` | No | URL to event image |\n| `link` | `string` | No | URL for \"more info\" |\n\n### TypeScript Types\n\n```typescript\ninterface TimelineData {\n  dateTimeFormat?: 'iso8601' | 'Gregorian' | string;\n  events: TimelineEvent[];\n}\n\ninterface BandConfig {\n  id?: string;\n  height?: string;\n  timeUnit?: 'day' | 'week' | 'month' | 'year' | 'decade' | 'century';\n  intervalPixels?: number;\n  overview?: boolean;\n  syncWith?: string;\n}\n\ninterface HotZone {\n  start: string;\n  end: string;\n  color?: string;\n  annotation?: string;\n}\n\ninterface Theme {\n  name: string;\n  backgroundColor?: string;\n  eventColor?: string;\n  eventTextColor?: string;\n  scaleColor?: string;\n  gridColor?: string;\n}\n```\n\n### Keyboard Navigation\n\n| Key | Action |\n|-----|--------|\n| `←` / `→` | Pan left/right |\n| `+` / `=` | Zoom in |\n| `-` | Zoom out |\n| `Escape` | Close popup |\n\n---\n\n## Simile JSON Compatibility\n\nThis library is 100% compatible with the original Simile Timeline JSON format:\n\n```json\n{\n  \"dateTimeFormat\": \"iso8601\",\n  \"events\": [\n    {\n      \"start\": \"1963-11-22\",\n      \"title\": \"JFK Assassination\",\n      \"description\": \"President Kennedy assassinated in Dallas, Texas.\",\n      \"color\": \"#c41e3a\"\n    }\n  ]\n}\n```\n\n**Supported date formats:**\n- ISO 8601: `2023-01-15`, `2023-01-15T10:30:00`\n- Legacy: `Jan 15 2023`, `January 15, 2023`\n- Year only: `2023`, `-500` (BCE)\n\n---\n\n## Browser Support\n\n| Browser | Support |\n|---------|---------|\n| Chrome | Latest |\n| Firefox | Latest |\n| Safari | Latest |\n| Edge | Latest |\n\n---\n\n## Contributing\n\nContributions are welcome! Please read our [Contributing Guide](https://github.com/thbst16/react-simile-timeline/blob/main/CONTRIBUTING.md) for details.\n\n---\n\n## License\n\nMIT License - see [LICENSE](https://github.com/thbst16/react-simile-timeline/blob/main/LICENSE) for details.\n\n---\n\n## Links\n\n- [Live Demo](https://react-simile-timeline.vercel.app/)\n- [GitHub Repository](https://github.com/thbst16/react-simile-timeline)\n- [Issue Tracker](https://github.com/thbst16/react-simile-timeline/issues)\n- [Changelog](https://github.com/thbst16/react-simile-timeline/blob/main/CHANGELOG.md)\n\n---\n\n\u003cp align=\"center\"\u003e\n  Made with React • TypeScript • MIT SIMILE Timeline\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthbst16%2Freact-simile-timeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthbst16%2Freact-simile-timeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthbst16%2Freact-simile-timeline/lists"}