react-image-timeline - npm Package Compare versions

Comparing version 3.2.7 to 3.2.11

package.json

 {
   "name": "react-image-timeline",
-  "version": "3.2.7",
+  "version": "3.2.11",
   "main": "index.js",
@@ -5,0 +5,0 @@ "types": "dist/timeline.d.ts",

README.md

@@ -30,24 +30,71 @@ [![CircleCI](https://circleci.com/gh/aaron9000/react-image-timeline/tree/master.svg?style=svg)](https://circleci.com/gh/aaron9000/react-image-timeline/tree/master)
 
+const events = [
+    {
+        date: new Date(2013, 9, 27),
+        text: "Sed leo elit, pellentesque sit amet congue quis, ornare nec lorem.",
+        title: "Cairo, Egypt",
+        buttonText: 'Click Me',
+        imageUrl: "http://github.com/aaron9000/react-image-timeline/blob/master/src/assets/cairo.jpg?raw=true",
+        onClick: console.log,
+    }
+];
+
 ReactDOM.render(<Timeline events={events} />, document.getElementById('root'));
 ```
 
-##### Sample TimelineEvent
+## Customization
+
+#### Custom Styles
+To customize the timeline, add your own CSS to override the [default styles](https://github.com/aaron9000/react-image-timeline/blob/master/src/lib/timeline.scss/).
+
+#### Event Metadata
+To pass extra data into custom components, use `extras` on `TimelineEvent`.
+
+#### Custom Dot Pattern
+The dots are defined in CSS using a [base64-encoded image](https://www.base64-image.de/). Encode a new image and override the corresponding CSS class.
+
+#### Custom Components
+For more advanced customization, you can pass in custom components to replace the defaults. Custom components will be passed a `TimelineEvent` model in props.
 ```js
-{
-    date: new Date(2013, 9, 27),
-    text: "Sed leo elit, pellentesque sit amet congue quis, ornare nec lorem.",
-    title: "Cairo, Egypt",
-    buttonText: 'Click Me',
-    imageUrl: "http://github.com/aaron9000/react-image-timeline/blob/master/src/assets/cairo.jpg?raw=true",
-    onClick: () => {
-        console.log('hello');
-    }
-}
+
+const CustomHeader = (props) => {
+
+    const {title, extras} = props.event;
+    const {customField} = extras;
+
+    return <div className="custom-header">
+        <h1>{title}</h1>
+        <p>{customField}</p>
+    </div>;
+};
+
+ReactDOM.render(<Timeline events={events} customComponents={{header: CustomHeader}}/>, document.getElementById('root'));
 ```
 
+---
 
-## Types
+#### Run Example Project (you will need `create-react-app` to run)
+```
+*install create-react-app*
+*clone repository*
+yarn
+yarn start
+```
 
-Typescript definitions are available
+#### Run Tests
+```
+*clone repository*
+yarn test
+```
 
+
+
+## TypeScript & Models
+
+Typescript definitions are included in the library.
+
+---
+
+#### Importing TypeScript Definitions
+
 ```js
@@ -62,4 +109,15 @@ import {
 
+---
+
 #### TimelineProps
 
+```js
+export interface TimelineProps {
+    customComponents?: TimelineCustomComponents | null;
+    events: Array<TimelineEvent>;
+    reverseOrder?: boolean;
+    denseLayout?: boolean;
+}
+```
+
 |                      Key |                     Type |                Required?
@@ -72,4 +130,17 @@ |--------------------------|--------------------------|--------------------------|
 
+---
+
 #### TimelineCustomComponents
 
+```js
+export interface TimelineCustomComponents {
+    topLabel?: React.PureComponent<TimelineEventProps> | React.ReactNode | null;
+    bottomLabel?: React.PureComponent<TimelineEventProps> | React.ReactNode | null;
+    header?: React.PureComponent<TimelineEventProps> | React.ReactNode | null;
+    imageBody?: React.PureComponent<TimelineEventProps> | React.ReactNode | null;
+    textBody?: React.PureComponent<TimelineEventProps> | React.ReactNode | null;
+    footer?: React.PureComponent<TimelineEventProps> | React.ReactNode | null;
+}
+```
+
 |                      Key |                     Type |                Required?
@@ -84,4 +155,12 @@ |--------------------------|--------------------------|--------------------------|
 
+---
+
 #### TimelineEventProps
 
+```js
+export interface TimelineEventProps {
+    event: TimelineEvent;
+}
+```
+
 |                      Key |                     Type |                Required?
@@ -91,4 +170,18 @@ |--------------------------|--------------------------|--------------------------|
 
+---
+
 #### TimelineEvent
 
+```js
+export interface TimelineEvent {
+    date: Date;
+    title: string;
+    imageUrl: string;
+    text: string;
+    onClick?: TimelineEventClickHandler | null;
+    buttonText?: string | null;
+    extras?: object | null;
+}
+```
+
 |                      Key |                     Type |                Required?
@@ -105,44 +198,1 @@ |--------------------------|--------------------------|--------------------------|
 
-## Customization
-
-#### Custom Styles
-To customize the timeline, add your own CSS to override the [default styles](https://github.com/aaron9000/react-image-timeline/blob/master/src/lib/timeline.scss/).
-
-#### Event Metadata
-To pass extra data into custom components, use `extras` on `TimelineEvent`.
-
-#### Custom Dot Pattern
-The dots are defined in CSS using a [base64-encoded image](https://www.base64-image.de/). Encode a new image and override the corresponding CSS class.
-
-#### Custom Components
-For more advanced customization, you can pass in custom components to replace the defaults. Custom components will be passed a `TimelineEvent` model in props.
-```js
-
-const CustomHeader = (props) => {
-
-    const {title, extras} = props.event;
-    const {customField} = extras;
-
-    return <div className="custom-header">
-        <h1>{title}</h1>
-        <p>{customField}</p>
-    </div>;
-};
-
-ReactDOM.render(<Timeline events={events} customComponents={{header: CustomHeader}}/>, document.getElementById('root'));
-```
-
----
-
-#### Run Example Project
-```
-*clone repository*
-npm install
-npm run start
-```
-
-#### Run Tests
-```
-*clone repository*
-npm run test
-```

No alert changes

Improved metrics

Total package byte prevSize

27046

increased by4.55%

Number of lines in readme file

193

increased by34.97%

No dependency changes