{"id":28092419,"url":"https://github.com/mailtop/horizontal-timeline","last_synced_at":"2025-10-28T05:32:02.782Z","repository":{"id":34413277,"uuid":"178403237","full_name":"mailtop/horizontal-timeline","owner":"mailtop","description":"Horizontal timeline component","archived":false,"fork":false,"pushed_at":"2023-01-06T01:46:17.000Z","size":842,"stargazers_count":30,"open_issues_count":25,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-24T18:51:53.973Z","etag":null,"topics":["material-ui","react","react-dom","react-icons"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/@mailtop/horizontal-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/mailtop.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":"2019-03-29T12:41:10.000Z","updated_at":"2024-12-03T17:03:51.000Z","dependencies_parsed_at":"2023-01-15T07:01:00.556Z","dependency_job_id":null,"html_url":"https://github.com/mailtop/horizontal-timeline","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mailtop%2Fhorizontal-timeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mailtop%2Fhorizontal-timeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mailtop%2Fhorizontal-timeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mailtop%2Fhorizontal-timeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mailtop","download_url":"https://codeload.github.com/mailtop/horizontal-timeline/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253948504,"owners_count":21988961,"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":["material-ui","react","react-dom","react-icons"],"created_at":"2025-05-13T13:13:54.429Z","updated_at":"2025-10-28T05:32:02.732Z","avatar_url":"https://github.com/mailtop.png","language":"JavaScript","readme":"# horizontal-timeline\nA React component to create horizontal timelines\n\n![](https://i.imgur.com/XawnTGY.jpg)\n\n![](https://i.imgur.com/2a5VbpG.jpg)\n\n![](https://i.imgur.com/l30rjll.jpg)\n\n**Attention**: *this dependency requires* [Material-UI](https://material-ui.com/)\n\n## Installation\n\n```\nnpm install --save @mailtop/horizontal-timeline\n```\nor\n```\nyarn add @mailtop/horizontal-timeline\n```\n\n## Usage\nThe following snippet generates the timeline you see in the first screenshot - [`react-icons`](https://react-icons.netlify.com/#/) required\n\nTo make it like the second screenshot set the property `variant` to `\"simple\"`, on the `Timeline` component, and to make it like the third one set it to `\"small\"`\n\n```jsx\nimport { Timeline, TimelineEvent } from '@mailtop/horizontal-timeline'\nimport { FaBug, FaRegCalendarCheck, FaRegFileAlt } from 'react-icons/fa'\n\n\u003cTimeline minEvents={5} placeholder\u003e\n  \u003cTimelineEvent\n    icon={FaRegFileAlt}\n    title='Em rascunho'\n    subtitle='26/03/2019 09:51'\n  /\u003e\n  \u003cTimelineEvent\n    color='#87a2c7'\n    icon={FaRegCalendarCheck}\n    title='Agendado'\n    subtitle='26/03/2019 09:51'\n  /\u003e\n  \u003cTimelineEvent\n    color='#9c2919'\n    icon={FaBug}\n    title='Erro'\n    subtitle='26/03/2019 09:51'\n    action={{\n      label: 'Ver detalhes...',\n      onClick: () =\u003e window.alert('Erro!')\n    }}\n  /\u003e\n\u003c/Timeline\u003e\n```\n\n## API\n### Timeline\nRenders a `div` with the same width as the parent element and creates a horizontal scrollbar according to the number of events\n\n**Props:**  \n**# variant:** defines what type of `Timeline` will be rendered. The screenshots above shows the `default`, `simple` and `small` respectively. When `small` or `simple` are choose, the event `title` and `subtitle` are shown on a tooltip and the `action`, if set, is fired when you click the circle  \n**# height:** set the size of the component. Default values, accordingly to `variant`:  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;*-small:* `95px`  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;*-simple:* `135px`  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;*-default:* `265px`  \n**# minEvents:** used to render placeholders for events, if `placeholder` is set to `true`, as shown in the screenshots above  \n**# maxEvents:** limit the number of events showed on screen  \n**# placeholder:** create the placholders when `minEvents` is defined  \n\n### TimelineEvent\nRenders events inside the `Timeline` wrapper. Any number of these can be created*\n\n**Props**  \n**# color:** set the color of the event. Default value: `#e0e0e0`  \n**# icon:** renders the icon that identifies the event  \n**# title:** renders the main text below the event; if a `string` is provided, you can alter it's properties with the prop `titleProps` **OR** you can pass an `element type` - a React component or a HTML component - fully customized  \n**# titleProps:** an `object` containing any of the [`Typography` props](https://material-ui.com/pt/api/typography/) from `@material-ui`  \n**# subtitle:** renders the secondary text below the event; if a `string` is provided, you can alter it's properties with the prop `subtitleProps` **OR** you can pass an `element type` - a React component or a HTML element - fully customized  \n**# subtitleProps:** an `object` containing any of the [`Typography` props](https://material-ui.com/pt/api/typography/) from `@material-ui`  \n**# action:** the action may be an `element type` - a React component or a HTML element - **OR** an `object` with these two properties:  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;*-label:* the text inside the button showed below the event  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;*-onClick:* the action fired when the user click the button or the event, if `simple` or `small` is set to `true` in the `Timeline` component  \n\n**\\*** *if* `maxEvents` *is set on the* `Timeline` *component, the number of events showed on screen will be limited to that ammount*\n\n\n## Development\n1. Clone the repository `git clone git@github.com:mailtop/horizontal-timeline.git`\n2. Run `yarn start`\n3. Access `http://localhost:3001`*\n\n**\\*** the example page is located in `/examples/src/App.js`\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmailtop%2Fhorizontal-timeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmailtop%2Fhorizontal-timeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmailtop%2Fhorizontal-timeline/lists"}