{"id":15822673,"url":"https://github.com/casperiv0/react-timeline","last_synced_at":"2025-03-15T01:31:40.261Z","repository":{"id":57346441,"uuid":"291445358","full_name":"casperiv0/react-timeline","owner":"casperiv0","description":"Reusable react components to create a good looking and responsive timeline out the box!","archived":false,"fork":false,"pushed_at":"2021-08-15T08:09:52.000Z","size":238,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-12T08:09:27.754Z","etag":null,"topics":["npm-package","react","react-timeline","timeline"],"latest_commit_sha":null,"homepage":"https://npm.im/react-timelinev2","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/casperiv0.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-30T10:07:33.000Z","updated_at":"2022-01-31T00:02:24.000Z","dependencies_parsed_at":"2022-09-15T09:43:56.593Z","dependency_job_id":null,"html_url":"https://github.com/casperiv0/react-timeline","commit_stats":null,"previous_names":["casperiv0/react-timeline","dev-caspertheghost/react-timeline"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casperiv0%2Freact-timeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casperiv0%2Freact-timeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casperiv0%2Freact-timeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casperiv0%2Freact-timeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/casperiv0","download_url":"https://codeload.github.com/casperiv0/react-timeline/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243671205,"owners_count":20328582,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["npm-package","react","react-timeline","timeline"],"created_at":"2024-10-05T08:01:27.209Z","updated_at":"2025-03-15T01:31:39.932Z","avatar_url":"https://github.com/casperiv0.png","language":"TypeScript","readme":"# React Timeline\n\nReusable react components to create a good looking and responsive timeline out the box!\n\n## Table of contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Available Props](#available-props)\n\n## Installation\n\n### npm\n\n```bash\nnpm install react-timelinev2\n```\n\n### Yarn\n\n```bash\nyarn add react-timelinev2\n```\n\n## Usage\n\n```js\nimport React from \"react\";\nimport { Timeline, TimelineItem } from \"react-timelinev2\";\n\nfunction App() {\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cTimeline\u003e\n        \u003cTimelineItem side=\"left\" title=\"hello world\" date=\"2020\"\u003e\n          Some text\n        \u003c/TimelineItem\u003e\n        \u003cTimelineItem shadows hoverShadow side=\"left\" title=\"hello world\" date=\"2020\"\u003e\n          I will have shadows!\n        \u003c/TimelineItem\u003e\n        \u003cTimelineItem side=\"right\" title=\"hello world\" date=\"2020\"\u003e\n          Some text\n        \u003c/TimelineItem\u003e\n        \u003cTimelineItem side=\"right\" title=\"hello world\" date=\"2020\"\u003e\n          Some text\n        \u003c/TimelineItem\u003e\n      \u003c/Timeline\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Screenshot\n\n![screenshot](./react-timeline.png)\n\n## Playground\n\n\u003chttps://codesandbox.io/s/k2ix2\u003e\n\n## Available Props\n\n### Timeline\n\n| Option     | type   | description                             | required |\n| ---------- | ------ | --------------------------------------- | -------- |\n| timelineBg | string | Set a background color for the timeline | false    |\n\n### TimelineItem\n\n| Option        | type    | description                                  | required |\n| ------------- | ------- | -------------------------------------------- | -------- |\n| title         | string  | set the title                                | true     |\n| side          | string  | `left` or `right`                            | true     |\n| date          | string  | set a date                                   | true     |\n| bgColor       | string  | set a background color for the timeline item | false    |\n| bodyTextColor | string  | Set a color for the body text                | false    |\n| dateColor     | string  | Set a color for date                         | false    |\n| titleBg       | string  | Set a background color for the title         | false    |\n| titleColor    | string  | Set a color for title                        | false    |\n| borderRadius  | string  | Set a border radius for the timeline item    | false    |\n| shadows       | boolean | Sets a box-shadow                            | false    |\n| hoverShadow   | boolean | Sets a box-shadow on hover only              | false    |\n\n## Supporting react-timelinev2\n\n**All stars/forks are appreciated!**\n\nMade with ❤ and TypeScript\n\n## License\n\n[MIT](./LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcasperiv0%2Freact-timeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcasperiv0%2Freact-timeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcasperiv0%2Freact-timeline/lists"}