see https://github.com/rcdexta/react-event-timeline
clone
git clone git@gist.github.com:86b6a5c2e23b49ad4e84c5d6f9cd3412.git
npm install
sudo docker-compose run -u (id -u $USER):(id -g $USER) app npm install
docker-compose up
sudo docker-compose up
open page
| version: '3' | |
| services: | |
| app: | |
| image: node | |
| volumes: | |
| - .:/app | |
| working_dir: /app | |
| ports: | |
| - 1234:1234 | |
| command: npx parcel index.html |
| <html> | |
| <head> | |
| <link | |
| href="https://fonts.googleapis.com/icon?family=Material+Icons" | |
| rel="stylesheet" | |
| /> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script src="./index.js"></script> | |
| </body> | |
| </html> |
| import ReactDOM from "react-dom"; | |
| import React from "react"; | |
| import { Timeline, TimelineEvent } from "react-event-timeline"; | |
| ReactDOM.render( | |
| <Timeline> | |
| <TimelineEvent | |
| title="John Doe sent a SMS" | |
| createdAt="2016-09-12 10:06 PM" | |
| icon={<i className="material-icons md-18">textsms</i>} | |
| > | |
| I received the payment for $543. Should be shipping the item within a | |
| couple of hours. | |
| </TimelineEvent> | |
| <TimelineEvent | |
| title="You sent an email to John Doe" | |
| createdAt="2016-09-11 09:06 AM" | |
| icon={<i className="material-icons md-18">email</i>} | |
| > | |
| Like we talked, you said that you would share the shipment details? This | |
| is an urgent order and so I am losing patience. Can you expedite the | |
| process and pls do share the details asap. Consider this a gentle reminder | |
| if you are on track already! | |
| </TimelineEvent> | |
| </Timeline>, | |
| document.getElementById("root") | |
| ); |
| { | |
| "name": "app", | |
| "version": "1.0.0", | |
| "description": "", | |
| "main": "index.js", | |
| "scripts": { | |
| "test": "echo \"Error: no test specified\" && exit 1" | |
| }, | |
| "keywords": [], | |
| "author": "", | |
| "license": "ISC", | |
| "dependencies": { | |
| "react": "^16.13.1", | |
| "react-dom": "^16.13.1", | |
| "react-event-timeline": "^1.6.3" | |
| }, | |
| "devDependencies": { | |
| "parcel": "^1.12.4" | |
| } | |
| } |