{"id":21319113,"url":"https://github.com/onejgordon/react-life-timeline","last_synced_at":"2025-07-12T04:31:26.376Z","repository":{"id":54669643,"uuid":"83685016","full_name":"onejgordon/react-life-timeline","owner":"onejgordon","description":"A life by weeks timeline component for React","archived":false,"fork":false,"pushed_at":"2017-06-06T16:49:07.000Z","size":341,"stargazers_count":88,"open_issues_count":2,"forks_count":9,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-07T06:15:08.003Z","etag":null,"topics":["life-by-weeks","life-history","react","reactjs","timeline"],"latest_commit_sha":null,"homepage":"http://onejgordon.github.io/react-life-timeline","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/onejgordon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-02T14:10:50.000Z","updated_at":"2024-04-29T15:45:46.000Z","dependencies_parsed_at":"2022-08-13T23:20:50.456Z","dependency_job_id":null,"html_url":"https://github.com/onejgordon/react-life-timeline","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onejgordon%2Freact-life-timeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onejgordon%2Freact-life-timeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onejgordon%2Freact-life-timeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onejgordon%2Freact-life-timeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/onejgordon","download_url":"https://codeload.github.com/onejgordon/react-life-timeline/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225708280,"owners_count":17511635,"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":["life-by-weeks","life-history","react","reactjs","timeline"],"created_at":"2024-11-21T19:34:08.269Z","updated_at":"2024-11-21T19:34:08.890Z","avatar_url":"https://github.com/onejgordon.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React Life Timeline\n\n[![npm version](https://badge.fury.io/js/react-life-timeline.svg)](https://badge.fury.io/js/react-life-timeline)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://jeremy.mit-license.org)\n\nA life by weeks timeline component for React. Inspired by [this post](http://waitbutwhy.com/2014/05/life-weeks.html) on Wait but Why, and busterbenson.com.\n\n## Demo \u0026 Examples\n\nLive demo: [onejgordon.github.io/react-life-timeline](http://onejgordon.github.io/react-life-timeline/)\n\nTo build the examples locally, run:\n\n```\nnpm install\nnpm start\n```\n\nThen open [`localhost:8000`](http://localhost:8000) in a browser.\n\n\n## Installation\n\nThe easiest way to use react-life-timeline is to install it from NPM and include it in your own React build process (using [Browserify](http://browserify.org), [Webpack](http://webpack.github.io/), etc).\n\nYou can also use the standalone build by including `dist/react-life-timeline.js` in your page. If you use this, make sure you have already included React, and it is available as a global variable.\n\n```\nnpm install react-life-timeline --save\n```\n\n\n## Usage\n\nDrop the component in with a get_events method that calls a callback with an array of events from a local or API data source.\n\nEach event object should have:\n\n- title: Title of event\n- date_start: Date object\n- date_end: Date object (optional)\n- color: Hex color (optional)\n- ongoing: Boolean (If true, event will be rendered through today, default: false)\n\n\n```\nvar ReactLifeTimeline = require('react-life-timeline');\n\n\u003cReactLifeTimeline get_events={this.fetch_events.bind(this)} birthday={new Date('1985-04-04')}\u003e\u003c/ReactLifeTimeline\u003e\n```\n\nAnd an example get_events function:\n\n```\n\nfetch_events: function(cb) {\n\tapi.get('/api/your-resource', {id: 1}, (res) =\u003e {\n\t\tcb(res.events);\n\t});\n}\n\n```\n\n### Properties\n\nEither specify a get_events function, or pass in events as props.\n\n* get_events: `void function(callback)`\n* events: Optional list of event objects\n* birthday (date object)\n* birthday_color (hex string)\n* subject_name (string, or null for 'I')\n* project_days (int, # of days to project into future)\n\n\n## Development (`src`, `lib` and the build process)\n\n**NOTE:** The source code for the component is in `src`. A transpiled CommonJS version (generated with Babel) is available in `lib` for use with node.js, browserify and webpack. A UMD bundle is also built to `dist`, which can be included without the need for any build system.\n\nTo build, watch and serve the examples (which will also watch the component source), run `npm start`. If you just want to watch changes to `src` and rebuild `lib`, run `npm run watch` (this is useful if you are working with `npm link`).\n\nThanks to JedWatson's incredibly easy to use: https://github.com/JedWatson/generator-react-component\n\n## License\n\nCopyright (c) 2017 Jeremy Gordon.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonejgordon%2Freact-life-timeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonejgordon%2Freact-life-timeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonejgordon%2Freact-life-timeline/lists"}