diff --git a/README.md b/README.md index 1388c9d32..fd414ae61 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,7 @@

+ [![Build Status](https://dev.azure.com/prabhummurthy/react-chrono/_apis/build/status/prabhuignoto.react-chrono?branchName=master)](https://dev.azure.com/prabhummurthy/react-chrono/_build/latest?definitionId=7&branchName=master) [![DeepScan grade](https://deepscan.io/api/teams/10074/projects/13644/branches/234929/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=10074&pid=13644&bid=234929) [![Codacy Badge](https://app.codacy.com/project/badge/Grade/f2e24a98defd4e4fa7f6f24d86b8dab5)](https://www.codacy.com/manual/prabhuignoto/react-chrono?utm_source=github.com&utm_medium=referral&utm_content=prabhuignoto/react-chrono&utm_campaign=Badge_Grade) @@ -24,6 +25,10 @@ +

Demo

+Full Demo - Try in your code editor + + @@ -88,6 +93,7 @@ npm install react-chrono ## Getting Started + Demo - try it in your editor Please ensure you wrap the component in a container with specified `width` and `height` dimensions. When no `mode` is specified, the component defaults to `HORIZONTAL` mode. Please check [props](#props) for all the available options. @@ -119,9 +125,8 @@ When no `mode` is specified, the component defaults to `HORIZONTAL` mode. Please } ``` -![horizontal-all](readme-assets/horizontal-all.png) - ### šŸš„Vertical Mode +Demo - vertical To render the timeline vertically use the `VERTICAL` mode @@ -135,6 +140,7 @@ To render the timeline vertically use the `VERTICAL` mode ### šŸš„Vertical Alternating +Demo - vertical alternating
In `VERTICAL_ALTERNATING` mode the timeline is rendered vertically with cards alternating between left and right side. ```jsx @@ -143,64 +149,62 @@ In `VERTICAL_ALTERNATING` mode the timeline is rendered vertically with cards al ``` -![vertical_alternating](./readme-assets/vertical-alternating.png) - ## Props Below are the available configuration options for the component: | Name | Default | Description | | :----------------------- | :------------------- | :--------------------------------------------------------------------------------------------------------------------------------------- | -| activeItemIndex | 0 | Selects the active timeline item when loading. | -| allowDynamicUpdate | false | Enables or disables dynamic updates of timeline items. | -| borderLessCards | false | Removes borders and shadows from the timeline cards. | +| activeItemIndex Demo | 0 | Selects the active timeline item when loading. | +| allowDynamicUpdate Demo | false | Enables or disables dynamic updates of timeline items. | +| borderLessCards Demo | false | Removes borders and shadows from the timeline cards. | | buttonTexts | | Customizes the alternative text for all buttons. | -| cardHeight | 200 | Defines the minimum height of timeline cards. | -| cardLess | false | Disables timeline cards in both horizontal and vertical layouts. | +| cardHeight Demo | 200 | Defines the minimum height of timeline cards. | +| cardLess Demo | false | Disables timeline cards in both horizontal and vertical layouts. | | cardPositionHorizontal | | Positions the card in horizontal mode. Options: `TOP` or `BOTTOM`. | | cardWidth | | Sets the maximum width of timeline cards. | | classNames | | Applies custom class names to different card elements. | -| contentDetailsHeight | 150 | Controls the height of the details section if using cardDetailedText. Refer to [TimelineItem model](#timeline-item-model) for more info. | -| disableAutoScrollOnClick | false | Prevents auto-scrolling when a timeline card is clicked. | -| disableClickOnCircle | false | Disables the click action on circular points. | -| disableInteraction | false | Disables all the interactions with the Timeline. | -| disableNavOnKey | false | Turns off keyboard navigation. | -| disableTimelinePoint | false | Disables the timeline point in both `HORIZONTAL` and `VERTICAL` mode. | +| contentDetailsHeight Demo | 150 | Controls the height of the details section if using cardDetailedText. Refer to [TimelineItem model](#timeline-item-model) for more info. | +| disableAutoScrollOnClick Demo | false | Prevents auto-scrolling when a timeline card is clicked. | +| disableClickOnCircle Demo | false | Disables the click action on circular points. | +| disableInteraction Demo | false | Disables all the interactions with the Timeline. | +| disableNavOnKey Demo | false | Turns off keyboard navigation. | +| disableTimelinePoint Demo | false | Disables the timeline point in both `HORIZONTAL` and `VERTICAL` mode. | | enableBreakPoint | true | Automatically switches to vertical mode when the vertical breakpoint is reached. | -| enableDarkToggle | false | Adds a toggle switch for dark mode. | -| enableLayoutSwitch | true | Switches the timeline layout | -| enableQuickJump | true | Allows to quickly jump to a timeline item | -| flipLayout | false | Reverses the layout (Right to Left). | -| focusActiveItemOnLoad | false | Automatically scrolls to and focuses on the `activeItemIndex` when loading. | +| enableDarkToggle Demo | false | Adds a toggle switch for dark mode. | +| enableLayoutSwitch Demo | true | Switches the timeline layout | +| enableQuickJump Demo | true | Allows to quickly jump to a timeline item | +| flipLayout Demo | false | Reverses the layout (Right to Left). | +| focusActiveItemOnLoad Demo | false | Automatically scrolls to and focuses on the `activeItemIndex` when loading. | | fontSizes | | Allows customization of font sizes. | -| highlightCardsOnHover | false | Highlights the card on hover | +| highlightCardsOnHover Demo | false | Highlights the card on hover | | items | [] | A collection of Timeline Item Models. | -| itemWidth | 300 | Sets the width of the timeline section in horizontal mode. | -| lineWidth | 3px | Adjusts the width of the timeline track line. | -| mediaHeight | 200 | Sets the minimum height for media elements like images or videos in the card. | +| itemWidth Demo | 300 | Sets the width of the timeline section in horizontal mode. | +| lineWidth Demo | 3px | Adjusts the width of the timeline track line. | +| mediaHeight Demo | 200 | Sets the minimum height for media elements like images or videos in the card. | | mediaSettings | | Configures settings specific to media layout. Refer to [mediaSettings](#media-settings) for more info. | | mode | VERTICAL_ALTERNATING | Sets the component mode. Options: `HORIZONTAL`, `VERTICAL`, `VERTICAL_ALTERNATING`. | -| nestedCardHeight | 150 | Defines the height of nested timeline cards. | -| noUniqueId | false | Prevents generating a unique id for the table wrapper. | +| nestedCardHeight Demo | 150 | Defines the height of nested timeline cards. | +| noUniqueId Demo | false | Prevents generating a unique id for the table wrapper. | | onItemSelected | | Invokes a callback on item selection, passing relevant data. | | onScrollEnd | | Detects the end of the timeline via `onScrollEnd`. | | onThemeChange | | Invokes a callback when the theme changes, triggered via `enableDarkToggle`. | -| parseDetailsAsHTML | false | Parses the `cardDetailedText` as HTML. | -| responsiveBreakPoint | 1024 | Break point at which the timeline changes to `VERTICAL` mode when `VERTICAL_ALTERNATING` is the default mode | -| scrollable | true | Makes the timeline scrollable in `VERTICAL` and `VERTICAL_ALTERNATING` modes. | -| showAllCardsHorizontal | false | Displays all cards in horizontal mode. By default, only the active card is shown. | -| slideItemDuration | 5000 | Sets the duration (in milliseconds) that a timeline card is active during a slideshow. | -| slideShow | false | Enables slideshow control. | +| parseDetailsAsHTML Demo | false | Parses the `cardDetailedText` as HTML. | +| responsiveBreakPoint Demo | 1024 | Break point at which the timeline changes to `VERTICAL` mode when `VERTICAL_ALTERNATING` is the default mode | +| scrollable Demo | true | Makes the timeline scrollable in `VERTICAL` and `VERTICAL_ALTERNATING` modes. | +| showAllCardsHorizontal Demo | false | Displays all cards in horizontal mode. By default, only the active card is shown. | +| slideItemDuration Demo | 5000 | Sets the duration (in milliseconds) that a timeline card is active during a slideshow. | +| slideShow Demo | false | Enables slideshow control. | | textDensity | HIGH | Configures the amount of text to be displayed in each timeline card. Can be either `HIGH` or `LOW` | -| textOverlay | false | Displays text as an overlay on media elements. Refer to [Text Overlay](#text-overlay-mode) for more info. | +| textOverlay demo | false | Displays text as an overlay on media elements. Refer to [Text Overlay](#text-overlay-mode) for more info. | | theme | | Customizes colors. Refer to [Theme](#theme) for more info. | | timelinePointDimension | | Defines the dimensions of circular points on the timeline. | | timelinePointShape | circle | Configures the shape of timeline points. Options: circle, square, diamond. | | titleDateFormat | 'MMM DD, YYYY' | Formats the date for each timeline item. Supports all [dayjs](https://day.js.org/) formats. | | toolbarPosition | TOP | Configures the position of the toolbar. Can be `TOP` or `BOTTOM` | | uniqueId | | Used with `noUniqueId` to set a custom unique id for the wrapper. | -| useReadMore | true | Enables or disables the "read more" button. Available if text content on the card is taller than the card itself. | -| disableToolbar | false | Hides the toolbar / control panel | +| useReadMore Demo | true | Enables or disables the "read more" button. Available if text content on the card is taller than the card itself. | +| disableToolbar Demo | false | Hides the toolbar / control panel | ### Mode @@ -220,6 +224,8 @@ Below are the available configuration options for the component: ### Timeline item Model +Demo - card props + | name | description | type | | ------------------ | --------------------------------------------------------------------------------------------- | ------------------ | | `cardDetailedText` | detailed text displayed in the timeline card | String or String[] | @@ -262,6 +268,7 @@ To disable keyboard navigation set `disableNavOnKey` to true. ### Scrollable +Demo - Scrollable With the scrollable prop, you can enable scrolling on both `VERTICAL` and `VERTICAL_ALTERNATING` modes. ```jsx @@ -342,6 +349,8 @@ To embed YouTube videos, use the right embed url. ### Text overlay mode +Demo + The `textOverlay` prop allows you to overlay text on top of a media element in a card.To enable the text overlay feature, simply add the text property to the items array in your Chrono timeline data. Here's an example: ```jsx @@ -531,6 +540,7 @@ Customize colors with the `theme` prop. ### Customize Font sizes +Demo - try different font sizes
Use the `fontSizes` prop to customize the font sizes of the timeline card. ```jsx @@ -665,7 +675,7 @@ pnpm rollup - [Typescript](https://www.typescriptlang.org/). - Styled with [emotion](https://emotion.sh/). - +- Jinno ## Meta Huge thanks to [BrowserStack](https://www.browserstack.com/) for the Open Source License!