Merge pull request #26 from aaron9000/improve-readme

[WIP] Improve Readme

Author: aaron9000

.circleci/config.yml

@@ -6,7 +6,7 @@ jobs:
  parallelism: 1
  shell: /bin/bash --login
  docker:
- - image: circleci/node:8.10
+ - image: circleci/node:10.20
  steps:
  - checkout
  - run: yarn

README.md

@@ -27,27 +27,75 @@ import ReactDOM from 'react-dom';
 import Timeline from 'react-image-timeline';
 require('react-image-timeline/dist/timeline.css'); // .scss also available
 
+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'));
+```
+
+---
+
+#### Run Example Project (you will need `create-react-app` to run)
+```
+*install create-react-app*
+*clone repository*
+yarn
+yarn --debug
+yarn start
+```
+
+#### Run Tests
+```
+*clone repository*
+yarn test
 ```
 
 
-## Types
 
-Typescript definitions are available
+## TypeScript & Models
+
+Typescript definitions are included in the library.
+
+---
+
+#### Importing TypeScript Definitions
 
 ```js
 import {
@@ -58,17 +106,41 @@ import {
 } from 'react-image-timeline';
 ```
 
+---
+
 #### TimelineProps
 
+```js
+export interface TimelineProps {
+ customComponents?: TimelineCustomComponents | null;
+ events: Array<TimelineEvent>;
+ reverseOrder?: boolean;
+ denseLayout?: boolean;
+}
+```
+
 | Key | Type | Required?
 |--------------------------|--------------------------|--------------------------|
 | events | Array<TimelineEvent> | Yes |
 | customComponents |TimelineCustomComponents | |
 | reverseOrder | boolean | |
 | denseLayout | boolean | |
 
+---
+
 #### 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?
 |--------------------------|--------------------------|--------------------------|
 | topLabel | component | |
@@ -78,14 +150,36 @@ import {
 | textBody | component | |
 | footer | component | |
 
+---
+
 #### TimelineEventProps
 
+```js
+export interface TimelineEventProps {
+ event: TimelineEvent;
+}
+```
+
 | Key | Type | Required?
 |--------------------------|--------------------------|--------------------------|
 | event | TimelineEvent | Yes |
 
+---
+
 #### 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?
 |--------------------------|--------------------------|--------------------------|
 | date | date | Yes |
@@ -97,46 +191,3 @@ import {
 | extras | object | |
 
 
-## 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
-```