Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-chrono
Advanced tools
react-chrono - npm Package Compare versions
Comparing version 1.14.0 to 1.15.0
@@ -7,2 +7,3 @@ import React from 'react'; | ||
| dir?: string; | ||
| fontSize?: string; | ||
| theme?: Theme; | ||
@@ -16,6 +17,7 @@ title?: string; | ||
| dir?: string; | ||
| fontSize?: string; | ||
| theme?: Theme; | ||
| } | ||
| declare const MemoTitle: React.MemoExoticComponent<({ title, url, theme, color, dir, active }: Title) => JSX.Element | null>; | ||
| declare const MemoTitle: React.MemoExoticComponent<({ title, url, theme, color, dir, active, fontSize }: Title) => JSX.Element | null>; | ||
| declare const MemoSubTitle: React.NamedExoticComponent<Content>; | ||
| export { MemoTitle, MemoSubTitle }; |
@@ -24,2 +24,3 @@ /// <reference types="react" /> | ||
| dir?: string | undefined; | ||
| fontSize?: string | undefined; | ||
| theme?: Theme | undefined; | ||
@@ -32,2 +33,3 @@ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>; | ||
| dir?: string | undefined; | ||
| fontSize: string; | ||
| theme: Theme; | ||
@@ -44,2 +46,4 @@ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>; | ||
| as?: import("react").ElementType<any> | undefined; | ||
| } & { | ||
| fontSize?: string | undefined; | ||
| }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>; | ||
@@ -46,0 +50,0 @@ export declare const TimelineContentDetailsWrapper: import("@emotion/styled").StyledComponent<{ |
@@ -32,4 +32,6 @@ /// <reference types="react" /> | ||
| active?: boolean | undefined; | ||
| highlight?: boolean | undefined; | ||
| position?: string | undefined; | ||
| theme?: Theme | undefined; | ||
| }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>; | ||
| export {}; |
@@ -41,2 +41,4 @@ /// <reference types="react" /> | ||
| as?: import("react").ElementType<any> | undefined; | ||
| } & { | ||
| showAllCards?: boolean | undefined; | ||
| }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>; |
@@ -45,2 +45,7 @@ /// <reference types="react" /> | ||
| flipLayout?: boolean; | ||
| fontSizes?: { | ||
| cardSubtitle?: string; | ||
| cardText?: string; | ||
| cardTitle?: string; | ||
| }; | ||
| hideControls?: boolean; | ||
@@ -57,2 +62,3 @@ itemWidth?: number; | ||
| }; | ||
| showAllCardsHorizontal?: boolean; | ||
| slideItemDuration?: number; | ||
@@ -59,0 +65,0 @@ slideShow?: boolean; |
| { | ||
| "name": "react-chrono", | ||
| "version": "1.14.0", | ||
| "version": "1.15.0", | ||
| "license": "MIT", | ||
@@ -35,4 +35,4 @@ "description": "A Modern Timeline component for React", | ||
| "@emotion/core": "^11.0.0-next.10", | ||
| "@emotion/react": "^11.7.1", | ||
| "@emotion/styled": "^11.6.0", | ||
| "@emotion/react": "^11.9.0", | ||
| "@emotion/styled": "^11.8.1", | ||
| "classnames": "^2.3.1", | ||
@@ -46,44 +46,44 @@ "focus-visible": "^5.2.0" | ||
| "devDependencies": { | ||
| "@babel/core": "^7.17.5", | ||
| "@babel/core": "^7.17.10", | ||
| "@babel/plugin-proposal-optional-chaining": "^7.16.7", | ||
| "@babel/plugin-transform-runtime": "^7.17.0", | ||
| "@babel/preset-env": "^7.16.11", | ||
| "@babel/plugin-transform-runtime": "^7.17.10", | ||
| "@babel/preset-env": "^7.17.10", | ||
| "@babel/preset-react": "^7.16.7", | ||
| "@babel/preset-typescript": "^7.16.7", | ||
| "@emotion/babel-plugin": "^11.7.2", | ||
| "@rollup/plugin-babel": "^5.3.0", | ||
| "@emotion/babel-plugin": "^11.9.2", | ||
| "@rollup/plugin-babel": "^5.3.1", | ||
| "@rollup/plugin-buble": "^0.21.3", | ||
| "@rollup/plugin-commonjs": "^21.0.1", | ||
| "@rollup/plugin-node-resolve": "^13.1.3", | ||
| "@rollup/plugin-commonjs": "^22.0.0", | ||
| "@rollup/plugin-node-resolve": "^13.3.0", | ||
| "@rollup/plugin-strip": "^2.1.0", | ||
| "@stylelint/postcss-css-in-js": "^0.37.2", | ||
| "@testing-library/dom": "^8.11.3", | ||
| "@testing-library/jest-dom": "^5.16.2", | ||
| "@testing-library/react": "^12.1.3", | ||
| "@testing-library/user-event": "^13.5.0", | ||
| "@stylelint/postcss-css-in-js": "^0.38.0", | ||
| "@testing-library/dom": "^8.13.0", | ||
| "@testing-library/jest-dom": "^5.16.4", | ||
| "@testing-library/react": "^13.1.1", | ||
| "@testing-library/user-event": "^14.1.1", | ||
| "@types/classnames": "^2.3.1", | ||
| "@types/jest": "^27.4.0", | ||
| "@types/node": "^17.0.18", | ||
| "@types/jest": "^27.5.0", | ||
| "@types/node": "^17.0.31", | ||
| "@types/react": "^17.0.39", | ||
| "@types/react-dom": "^17.0.10", | ||
| "@types/react-dom": "^17.0.13", | ||
| "@types/react-router-dom": "^5.3.3", | ||
| "@typescript-eslint/eslint-plugin": "^5.12.0", | ||
| "@typescript-eslint/parser": "^5.12.0", | ||
| "@vitejs/plugin-react": "^1.2.0", | ||
| "babel-loader": "^8.2.3", | ||
| "cssnano": "^5.0.17", | ||
| "cypress": "^9.5.0", | ||
| "eslint": "^8.9.0", | ||
| "eslint-config-prettier": "^8.3.0", | ||
| "eslint-plugin-import": "^2.25.4", | ||
| "@typescript-eslint/eslint-plugin": "^5.22.0", | ||
| "@typescript-eslint/parser": "^5.22.0", | ||
| "@vitejs/plugin-react": "^1.3.2", | ||
| "babel-loader": "^8.2.5", | ||
| "cssnano": "^5.1.7", | ||
| "cypress": "^9.6.0", | ||
| "eslint": "^8.14.0", | ||
| "eslint-config-prettier": "^8.5.0", | ||
| "eslint-plugin-import": "^2.26.0", | ||
| "eslint-plugin-jsx-a11y": "^6.4.1", | ||
| "eslint-plugin-react": "^7.28.0", | ||
| "eslint-plugin-react": "^7.29.4", | ||
| "eslint-plugin-sort-keys-fix": "^1.1.2", | ||
| "eslint-plugin-typescript-sort-keys": "^2.1.0", | ||
| "husky": "^7.0.4", | ||
| "jest": "^27.5.1", | ||
| "lint-staged": "^12.3.4", | ||
| "postcss": "^8.4.6", | ||
| "jest": "^28.0.3", | ||
| "lint-staged": "^12.4.1", | ||
| "postcss": "^8.4.13", | ||
| "postcss-syntax": "^0.36.2", | ||
| "prettier": "^2.5.1", | ||
| "prettier": "^2.6.2", | ||
| "pretty-quick": "^3.1.3", | ||
@@ -93,11 +93,11 @@ "react": "^17.0.2", | ||
| "react-is": "^17.0.2", | ||
| "react-router-dom": "^6.2.1", | ||
| "react-router-dom": "^6.3.0", | ||
| "rimraf": "^3.0.2", | ||
| "rollup": "^2.67.3", | ||
| "rollup": "^2.71.1", | ||
| "rollup-plugin-postcss": "^4.0.2", | ||
| "rollup-plugin-terser": "^7.0.2", | ||
| "rollup-plugin-typescript2": "^0.31.2", | ||
| "snyk": "^1.855.0", | ||
| "snyk": "^1.917.0", | ||
| "start-server-and-test": "^1.14.0", | ||
| "stylelint": "^14.5.1", | ||
| "stylelint": "^14.8.1", | ||
| "stylelint-config-recommended": "^6.0.0", | ||
@@ -107,5 +107,5 @@ "stylelint-config-styled-components": "^0.1.1", | ||
| "stylelint-processor-styled-components": "^1.10.0", | ||
| "ts-jest": "^27.1.3", | ||
| "typescript": "^4.5.5", | ||
| "vite": "^2.8.4" | ||
| "ts-jest": "^27.1.4", | ||
| "typescript": "^4.6.4", | ||
| "vite": "^2.9.7" | ||
| }, | ||
@@ -112,0 +112,0 @@ "peerDependencies": { |
243
README.md
@@ -58,2 +58,3 @@ <div align="center"> | ||
| - [🎨Theme](#theme) | ||
| - [Customize Font sizes](#customize-font-sizes) | ||
| - [📦CodeSandbox Examples](#codesandbox-examples) | ||
@@ -70,3 +71,3 @@ - [📚Storybook](#storybook) | ||
| ```sh | ||
| ```jsx | ||
| yarn add react-chrono | ||
@@ -81,3 +82,3 @@ ``` | ||
| ```sh | ||
| ```jsx | ||
| import React from "react" | ||
@@ -115,9 +116,6 @@ import { Chrono } from "react-chrono"; | ||
| ```sh | ||
| <div style={{ width: "500px", height: "950px" }}> | ||
| <Chrono | ||
| items={items} | ||
| mode="VERTICAL" | ||
| /> | ||
| </div> | ||
| ```jsx | ||
| <div style={{ width: '500px', height: '950px' }}> | ||
| <Chrono items={items} mode="VERTICAL" /> | ||
| </div> | ||
| ``` | ||
@@ -131,9 +129,6 @@ | ||
| ```sh | ||
| <div style={{ width: "500px", height: "950px" }}> | ||
| <Chrono | ||
| items={items} | ||
| mode="VERTICAL_ALTERNATING" | ||
| /> | ||
| </div> | ||
| ```jsx | ||
| <div style={{ width: '500px', height: '950px' }}> | ||
| <Chrono items={items} mode="VERTICAL_ALTERNATING" /> | ||
| </div> | ||
| ``` | ||
@@ -147,10 +142,6 @@ | ||
| ```sh | ||
| <div style={{ width: "500px", height: "950px" }}> | ||
| <Chrono | ||
| items={items} | ||
| slideShow | ||
| mode="VERTICAL_ALTERNATING" | ||
| /> | ||
| </div> | ||
| ```jsx | ||
| <div style={{ width: '500px', height: '950px' }}> | ||
| <Chrono items={items} slideShow mode="VERTICAL_ALTERNATING" /> | ||
| </div> | ||
| ``` | ||
@@ -162,29 +153,31 @@ | ||
| | name | description | default | | ||
| | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------ | | ||
| | activeItemIndex | Selects the active timeline item on load. | 0 | | ||
| | allowDynamicUpdate | Allows timeline items to be updated dynamically. | false | | ||
| | borderLessCards | Removes the border & shadow from the timeline cards. | false | | ||
| | cardHeight | Sets the minimum height of the timeline card. | 200 | | ||
| | cardLess | Disables timeline cards on both horizontal and vertical modes. | false | | ||
| | cardPositionHorizontal | Positions the card in `HORIZONTAL` mode. can be either `TOP` or `BOTTOM`. | | | ||
| | cardWidth | Sets the maximum width of the timeline card. | | | ||
| | disableAutoScrollOnClick | Disables the timeline from auto scrolling on clicking a timeline item. | false | | ||
| | disableClickOnCircle | Disables click action on the timeline circle points. | false | | ||
| | disableNavOnKey | Disables the keyboard navigation. | false | | ||
| | enableOutline | Enables the outline menu on `VERTICAL` and `VERTICAL_ALTERNATING` mode. | false | | ||
| | flipLayout | Flips the layout (RTL). | false | | ||
| | hideControls | Hides the navigation controls. | false | | ||
| | itemWidth | Width of the timeline section in `HORIZONTAL` mode. | 300 | | ||
| | items | Collection of [Timeline Item Model](#timeline-item-model). | [] | | ||
| | lineWidth | Prop to customize the width of the timeline track line. | 3px | | ||
| | mode | Sets the mode of the component. can be `HORIZONTAL`, `VERTICAL` or `VERTICAL_ALTERNATING`. | `HORIZONTAL` | | ||
| | onItemSelected | Callback invoked on a item selection. passes all of the data pertinent to the item. | | | ||
| | onScrollEnd | Use the `onScrollEnd` to detect the end of the timeline. | | | ||
| | scrollable | Makes the timeline [scrollable](#scrollable) (applicable for `VERTICAL` & `VERTICAL_ALTERNATING`). | true | | ||
| | slideItemDuration | Duration (in ms), the timeline card is active during a `slideshow`. | 5000 | | ||
| | slideShow | Enables the slideshow control. | false | | ||
| | theme | Prop to customize the colors. | | | ||
| | timelineCircleDimension | Dimension of the timeline circular points. | false | | ||
| | useReadMore | Enables or disables the read more button.The read more function is enabled only when the height <br /> of the text content exceeds the overall height of the card itself | true | | ||
| | name | description | default | | ||
| | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | | ||
| | activeItemIndex | Selects the active timeline item on load. | 0 | | ||
| | allowDynamicUpdate | Allows timeline items to be updated dynamically. | false | | ||
| | borderLessCards | Removes the border & shadow from the timeline cards. | false | | ||
| | cardHeight | Sets the minimum height of the timeline card. | 200 | | ||
| | cardLess | Disables timeline cards on both horizontal and vertical modes. | false | | ||
| | cardPositionHorizontal | Positions the card in `HORIZONTAL` mode. can be either `TOP` or `BOTTOM`. | | | ||
| | cardWidth | Sets the maximum width of the timeline card. | | | ||
| | disableAutoScrollOnClick | Disables the timeline from auto-scrolling when a timeline card is clicked. | false | | ||
| | disableClickOnCircle | Disables click action on the circular points. | false | | ||
| | disableNavOnKey | Disables keyboard navigation. | false | | ||
| | enableOutline | Enables the outline menu on `VERTICAL` and `VERTICAL_ALTERNATING` mode. | false | | ||
| | flipLayout | Flips the layout (RTL). | false | | ||
| | hideControls | Hides the navigation controls. | false | | ||
| | itemWidth | Width of the timeline section in `HORIZONTAL` mode. | 300 | | ||
| | items | Collection of [Timeline Item Model](#timeline-item-model). | [] | | ||
| | lineWidth | Prop to customize the width of the timeline track line. | 3px | | ||
| | mode | Sets the mode of the component. can be `HORIZONTAL`, `VERTICAL` or `VERTICAL_ALTERNATING`. | `HORIZONTAL` | | ||
| | onItemSelected | Callback invoked on a item selection. passes all of the data pertinent to the item. | | | ||
| | onScrollEnd | Use the `onScrollEnd` to detect the end of the timeline. | | | ||
| | scrollable | Makes the timeline [scrollable](#scrollable) (applicable for `VERTICAL` & `VERTICAL_ALTERNATING`). | true | | ||
| | showAllCardsHorizontal | In horizontal mode, only the active card is displayed. With this prop, you can display all the cards. | false | | ||
| | slideItemDuration | Duration (in ms), the timeline card is active during a `slideshow`. | 5000 | | ||
| | slideShow | Enables the slideshow control. | false | | ||
| | theme | Prop to customize the colors. | | | ||
| | timelineCircleDimension | Dimensions of the circular points on the timeline | false | | ||
| | useReadMore | Enables or disables the "read more" button. The "read more" button is only available if the text content on the card is taller than the card itself. | true | | ||
| | fontSizes | property to change the font size of the card's title, subtitle, and text. | true | | ||
@@ -195,12 +188,12 @@ ### Mode | ||
| ```sh | ||
| <Chrono items={items} mode="HORIZONTAL" /> | ||
| ```jsx | ||
| <Chrono items={items} mode="HORIZONTAL" /> | ||
| ``` | ||
| ```sh | ||
| <Chrono items={items} mode="VERTICAL" /> | ||
| ```jsx | ||
| <Chrono items={items} mode="VERTICAL" /> | ||
| ``` | ||
| ```sh | ||
| <Chrono items={items} mode="VERTICAL_ALTERNATING" /> | ||
| ```jsx | ||
| <Chrono items={items} mode="VERTICAL_ALTERNATING" /> | ||
| ``` | ||
@@ -219,3 +212,3 @@ | ||
| ```sh | ||
| ```jsx | ||
| { | ||
@@ -244,3 +237,3 @@ title: "May 1940", | ||
| ```sh | ||
| ```jsx | ||
| <Chrono items={items} disableNavOnKey /> | ||
@@ -253,4 +246,4 @@ ``` | ||
| ```sh | ||
| <Chrono items={items} scrollable /> | ||
| ```jsx | ||
| <Chrono items={items} scrollable /> | ||
| ``` | ||
@@ -260,4 +253,4 @@ | ||
| ```sh | ||
| <Chrono items={items} scrollable={{scrollbar: true}} /> | ||
| ```jsx | ||
| <Chrono items={items} scrollable={{ scrollbar: true }} /> | ||
| ``` | ||
@@ -275,3 +268,3 @@ | ||
| ```sh | ||
| ```jsx | ||
| { | ||
@@ -298,3 +291,3 @@ title: "May 1940", | ||
| ```sh | ||
| ```jsx | ||
| { | ||
@@ -316,3 +309,3 @@ title: "7 December 1941", | ||
| ```sh | ||
| ```jsx | ||
| { | ||
@@ -343,11 +336,11 @@ title: "7 December 1941", | ||
| ```sh | ||
| <Chrono mode="VERTICAL"> | ||
| <div> | ||
| <p>Lorem Ipsum. Lorem Ipsum. Lorem Ipsum</p> | ||
| </div> | ||
| <div> | ||
| <img src="<url to a nice image" /> | ||
| </div> | ||
| </Chrono> | ||
| ```jsx | ||
| <Chrono mode="VERTICAL"> | ||
| <div> | ||
| <p>Lorem Ipsum. Lorem Ipsum. Lorem Ipsum</p> | ||
| </div> | ||
| <div> | ||
| <img src="<url to a nice image" /> | ||
| </div> | ||
| </Chrono> | ||
| ``` | ||
@@ -359,16 +352,16 @@ | ||
| ```sh | ||
| const items = [ | ||
| {title: "Timeline title 1", cardTitle: "Card Title 1"}, | ||
| {title: "Timeline title 2", cardTitle: "Card Title 2"} | ||
| ]; | ||
| ```jsx | ||
| const items = [ | ||
| { title: 'Timeline title 1', cardTitle: 'Card Title 1' }, | ||
| { title: 'Timeline title 2', cardTitle: 'Card Title 2' }, | ||
| ]; | ||
| <Chrono mode="VERTICAL" items={items}> | ||
| <div> | ||
| <p>Lorem Ipsum. Lorem Ipsum. Lorem Ipsum</p> | ||
| </div> | ||
| <div> | ||
| <img src="<url to a nice image" /> | ||
| </div> | ||
| </Chrono> | ||
| <Chrono mode="VERTICAL" items={items}> | ||
| <div> | ||
| <p>Lorem Ipsum. Lorem Ipsum. Lorem Ipsum</p> | ||
| </div> | ||
| <div> | ||
| <img src="<url to a nice image" /> | ||
| </div> | ||
| </Chrono>; | ||
| ``` | ||
@@ -384,9 +377,9 @@ | ||
| ```sh | ||
| <Chrono items={items} mode="VERTICAL_ALTERNATING"> | ||
| <div className="chrono-icons"> | ||
| <img src="image1.svg" alt="image1" /> | ||
| <img src="image2.svg" alt="image2" /> | ||
| </div> | ||
| </Chrono> | ||
| ```jsx | ||
| <Chrono items={items} mode="VERTICAL_ALTERNATING"> | ||
| <div className="chrono-icons"> | ||
| <img src="image1.svg" alt="image1" /> | ||
| <img src="image2.svg" alt="image2" /> | ||
| </div> | ||
| </Chrono> | ||
| ``` | ||
@@ -396,15 +389,15 @@ | ||
| ```sh | ||
| <Chrono mode="VERTICAL" items={items}> | ||
| <div> | ||
| <p>Lorem Ipsum. Lorem Ipsum. Lorem Ipsum</p> | ||
| </div> | ||
| <div> | ||
| <img src="<url to a nice image" /> | ||
| </div> | ||
| <div className="chrono-icons"> | ||
| <img src="image1.svg" alt="image1" /> | ||
| <img src="image2.svg" alt="image2" /> | ||
| </div> | ||
| </Chrono> | ||
| ```jsx | ||
| <Chrono mode="VERTICAL" items={items}> | ||
| <div> | ||
| <p>Lorem Ipsum. Lorem Ipsum. Lorem Ipsum</p> | ||
| </div> | ||
| <div> | ||
| <img src="<url to a nice image" /> | ||
| </div> | ||
| <div className="chrono-icons"> | ||
| <img src="image1.svg" alt="image1" /> | ||
| <img src="image2.svg" alt="image2" /> | ||
| </div> | ||
| </Chrono> | ||
| ``` | ||
@@ -418,3 +411,3 @@ | ||
| ```sh | ||
| ```jsx | ||
| <Chrono items={items} slideShow slideItemDuration={4500} /> | ||
@@ -428,3 +421,3 @@ ``` | ||
| ```sh | ||
| ```jsx | ||
| <Chrono items={items} enableOutline /> | ||
@@ -443,11 +436,11 @@ ``` | ||
| ```sh | ||
| ```jsx | ||
| <Chrono | ||
| items={items} | ||
| theme={{ | ||
| primary: "red", | ||
| secondary: "blue", | ||
| cardBgColor: "yellow", | ||
| cardForeColor: "violet", | ||
| titleColor: "red" | ||
| primary: 'red', | ||
| secondary: 'blue', | ||
| cardBgColor: 'yellow', | ||
| cardForeColor: 'violet', | ||
| titleColor: 'red', | ||
| }} | ||
@@ -457,2 +450,18 @@ /> | ||
| ### Customize Font sizes | ||
| Use the `fontSizes` prop to customize the font sizes of the timeline card. | ||
| ```jsx | ||
| <Chrono | ||
| items={data} | ||
| mode="HORIZONTAL" | ||
| fontSizes={{ | ||
| cardSubtitle: '0.85rem', | ||
| cardText: '0.8rem', | ||
| cardTitle: '1rem', | ||
| }} | ||
| ></Chrono> | ||
| ``` | ||
| ## 📦CodeSandbox Examples | ||
@@ -499,3 +508,3 @@ | ||
| ```sh | ||
| ```jsx | ||
| # run unit tests | ||
@@ -502,0 +511,0 @@ yarn test |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by5.39%
343591
- Lines of code
- increased by4.35%
1989
- Number of lines in readme file
- increased by1.67%
547
Worsened metrics
- Number of low supply chain risk alerts
- increased by9.26%
354
Dependency changes
Updated@emotion/react@^11.9.0
Updated@emotion/styled@^11.8.1