{"id":13403211,"url":"https://github.com/rcdexta/react-event-timeline","last_synced_at":"2025-05-14T03:08:21.671Z","repository":{"id":45745364,"uuid":"71045676","full_name":"rcdexta/react-event-timeline","owner":"rcdexta","description":"A responsive event timeline in React.js","archived":false,"fork":false,"pushed_at":"2025-02-13T05:20:42.000Z","size":2829,"stargazers_count":536,"open_issues_count":8,"forks_count":57,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-13T03:58:45.973Z","etag":null,"topics":["react","react-component","reactjs","storybook","timeline","widget"],"latest_commit_sha":null,"homepage":"https://rcdexta.com/react-event-timeline","language":"JavaScript","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/rcdexta.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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}},"created_at":"2016-10-16T11:18:46.000Z","updated_at":"2025-01-08T17:20:48.000Z","dependencies_parsed_at":"2025-02-22T07:10:18.467Z","dependency_job_id":"6170bc3d-0c31-412f-bbfb-a571556ed77e","html_url":"https://github.com/rcdexta/react-event-timeline","commit_stats":null,"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcdexta%2Freact-event-timeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcdexta%2Freact-event-timeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcdexta%2Freact-event-timeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcdexta%2Freact-event-timeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rcdexta","download_url":"https://codeload.github.com/rcdexta/react-event-timeline/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248661706,"owners_count":21141450,"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":["react","react-component","reactjs","storybook","timeline","widget"],"created_at":"2024-07-30T19:01:26.870Z","updated_at":"2025-04-13T03:58:53.777Z","avatar_url":"https://github.com/rcdexta.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","React"],"sub_categories":["React Components"],"readme":"# react-event-timeline\n\nReact component to generate a responsive vertical event timeline\n\n[![npm version](https://badge.fury.io/js/react-event-timeline.svg)](https://badge.fury.io/js/react-event-timeline)\n[![Build Status](https://travis-ci.org/rcdexta/react-event-timeline.svg?branch=master)](https://travis-ci.org/rcdexta/react-event-timeline)\n[![codecov](https://codecov.io/gh/rcdexta/react-event-timeline/branch/master/graph/badge.svg)](https://codecov.io/gh/rcdexta/react-event-timeline)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/rcdexta/react-event-timeline/blob/master/LICENSE.md)\n\n![alt tag](https://github.com/rcdexta/react-event-timeline/raw/master/timeline.png)\n\nStorybook demos here: https://rcdexta.github.io/react-event-timeline\n\nCodeSandbox version to play with examples (in typescript):\n\n[![Edit Timeline Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/13k1jjqj64)\n\n\u003e Note: CodeSandbox version has predefined styles and icons loaded in index.html for better presentation!\n\n## Features\n\n* Is lightweight\n* Responsive and extensible\n* Configurable and customizable\n\n## Getting started\n\nTo install as npm dependency\n```\nnpm install --save react-event-timeline\n```\nor if you use `yarn`\n```\nyarn add react-event-timeline\n```\n\n## Usage\n\nThe following snippet generates the timeline you see in the screenshot:\n\n```jsx\nimport {Timeline, TimelineEvent} from 'react-event-timeline'\n\nReactDOM.render(\n    \u003cTimeline\u003e\n            \u003cTimelineEvent title=\"John Doe sent a SMS\"\n                           createdAt=\"2016-09-12 10:06 PM\"\n                           icon={\u003ci className=\"material-icons md-18\"\u003etextsms\u003c/i\u003e}\n            \u003e\n                I received the payment for $543. Should be shipping the item within a couple of hours.\n            \u003c/TimelineEvent\u003e\n            \u003cTimelineEvent\n                title=\"You sent an email to John Doe\"\n                createdAt=\"2016-09-11 09:06 AM\"\n                icon={\u003ci className=\"material-icons md-18\"\u003eemail\u003c/i\u003e}\n            \u003e\n                Like we talked, you said that you would share the shipment details? This is an urgent order and so I\n                    am losing patience. Can you expedite the process and pls do share the details asap. Consider this a\n                    gentle reminder if you are on track already!\n            \u003c/TimelineEvent\u003e\n    \u003c/Timeline\u003e,\n      document.getElementById('container')\n);\n```\n\nPlease refer [storybook](https://github.com/rcdexta/react-event-timeline/blob/master/stories/App.story.js) to check code for all the examples in the storybook demo.\n\n## API Documentation\n\n### Timeline\n\nThis is the wrapper component that creates the infinite vertical timeline\n\n| Name           | Type   | Description                              |\n| -------------- | ------ | ---------------------------------------- |\n| className      | string | The css class name of timeline container|\n| style          | object | Override inline styles of timeline container |\n| orientation    | string | Display the timeline on `right` or `left`. Default: `left` |\n| lineColor      | string | CSS color code to override the line color |\n| lineStyle      | string | Override the appearance of line with custom css styling |\n\n### TimelineEvent\n\nEach event in the timeline will be represented by the `TimelineEvent` component. There can be multiple repeating instances of this component inside `Timeline` wrapper\n\n| Name         | Type   | Description                              |\n| ------------ | ------ | ---------------------------------------- |\n| title        | node   | The title of the event. Can be string or any DOM element node(s) |\n| createdAt    | node   | The time at which the event occurred. Can be datetime string or any DOM element node(s) |\n| subtitle     | node   | If you prefer having the title at the top and some caption below, omit createdAt and specify title and subtitle |\n| icon         | node   | The icon to show as event lable. Can be a SVG or font icon |\n| iconStyle    | object   | Custom CSS styling for the icon                  |\n| bubbleStyle  | object  | Custom CSS styling for the bubble containing the icon |\n| buttons      | node   | Action buttons to display to the right of the event content |\n| contentStyle | node   | Override content style                   |\n| container    | string | Optional value `card` will render event as a Card |\n| style        | object   | Override style for the entire event container. Can be used to modify card appearance if container is selected as `card` |\n| titleStyle   | object   | Override style for the title content |\n| subtitleStyle | object | Override style for the subtitle content |\n| cardHeaderStyle | object | Override style for the card header if container is `card` |\n| collapsible  | boolean  | Make the timeline event collapse body content |\n| showContent  | boolean  | if `collapsible` is true, should content be shown by default. `false` is default value |\n\n### TimelineBlip\n\nUse this component if your event footprint is too small and can be described in a single line\n\n| Name      | Type   | Description                              |\n| --------- | ------ | ---------------------------------------- |\n| title     | node   | The title of the event. Can be string or any DOM element node(s) |\n| icon      | node   | The icon to show as event label. Can be a SVG or font icon |\n| iconColor | string | CSS color code for icon                  |\n| iconStyle | object   | Custom CSS styling for the icon                  |\n| style     | object   | Override style for the entire event container |\n\nRefer to Condensed Timeline in Storybook for examples of using this component.\n\n## Development\n\nThis project recommends using [react-storybook](https://github.com/kadirahq/react-storybook) as a UI component development environment. Use the following scripts for your development workflow:\n\n1. `npm run storybook`: Start developing by using storybook\n2. `npm run lint` : Lint all js files\n3. `npm run lintfix` : fix linting errors of all js files\n4. `npm run build`: transpile all ES6 component files into ES5(commonjs) and put it in `dist` directory\n5. `npm run docs`: create static build of storybook in `docs` directory that can be used for github pages\n\nThe storybook artefacts can be found in `stories` folder. Run `npm run storybook` and you should see your code changes hot reloaded on the browser\n\nAlso use [semantic-release](https://github.com/semantic-release/semantic-release) to automate release to npm. Use `npm run commit` to commit your changes and raise a PR.\n\n# Acknowledgements\n\nThis project is graciously supported by IDE tools offered by [JetBrains](https://www.jetbrains.com/) for development.\n\n[![alt tag](https://github.com/rcdexta/react-event-timeline/blob/master/jetbrains-badge.png)](https://www.jetbrains.com/)\n\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frcdexta%2Freact-event-timeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frcdexta%2Freact-event-timeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frcdexta%2Freact-event-timeline/lists"}