I am having a problem in my cli with a dependency that is in this library. Please reference to this link joshwnj/react-visibility-sensor#148, where I detail the issue for this other repo called react-visibility-sensor. This error makes your repo not work and I have the fix/hack that I found to have the react-visibility-sensor point to the correct react-dom dependency.

ERROR in ./node_modules/react-visibility-sensor/dist/visibility-sensor.js
Module not found: Error: Can't resolve 'ReactDOM' in 'C:\Software\BTS\Flipl\node_modules\react-visibility-sensor\dist'
 @ ./node_modules/react-visibility-sensor/dist/visibility-sensor.js 4:286-324
 @ ./node_modules/react-vertical-timeline-component/dist-es6/VerticalTimelineElement.js
 @ ./node_modules/react-vertical-timeline-component/dist-es6/index.js
 @ ./app/components/Modules/FliplTimeline.js
 @ ./app/components/App.js
 @ ./public/index.js
 @ multi babel-polyfill whatwg-fetch ./public/index.js

I am on Node version: 12.13.0.

If there is any ideas that will help resolve this I would appreciate it.

Also I might be able to help fix this if you would like a PR. I might be able to replace this dependency with another one or possibly create the scroll to animation.

Hi, I saw an error in the documentation about the layout prop. It's written in the explanation under-
"Choose if you want 'one-column' or 'two-columns' (default: 'two-columns'). "
but in the code, the props options are 1-column and 2-columns.
So it writes a warning and also if you will write two-columns it won't work (it will do one column).
I have no problem changing it on my own but I don't know if you prefer to change the documentation or the code itself.

https://github.com/stephane-monnot/react-vertical-timeline/blob/master/src/VerticalTimelineElement.js#L65

adds date element

Div is all miss aligned and style is messed up. Please help.

Hey!

In mobile, when the timeline element appear on screen during scrolling, my navbar is bugging and i cannot find why..

Can you help me please? :/

Here is my site:
www.oliviercastroperrier.com

Hi,
thanks for building this - it's saving me a lot of time while I build my portfolio.

I have both an issue and a question:

Issue: I'm passing an image tag through the icon property listed in the documentation.
It doesn't seem to resize responsively. What css do I need to apply to the image for it to resize properly?

Question: How do I change the color of the timeline line?

Thanks.

Icon prop code is below:

            <VerticalTimelineElement
              className="vertical-timeline-element--work"
              contentStyle={{ background: '#013535', color: '#fff' }}
              contentArrowStyle={{ borderRight: '7px solid  #013535' }}
              date="2017 - Current"
              iconStyle={{ background: '#013535', color: '#fff' }}
              icon={<img class="flag-size" src={deflag}></img>}
            >

            </VerticalTimelineElement> 

Is there anyway to modify the line color of the timeline ?

Hi,

First of all, very good job for the timeline! (if you want to see it what I did with it https://www.venatusuniverse.com/en/events)

But just a small question, is there any way to change the animation? I want to make the bubble to come from the bottom of the page instead of the right side of the page.

Thanks in advance,

Nico

Hello there and congratulations for this library! It's amazing!

What about a new prop that allows us to render the component in a single column instead of using two? In other words: mobile layout on desktop.

Let me know 👍

I changed the color of line between each vertical element....
The color is black.....
I face an issue while loading the timeline
It shows a black line before loading the timeline events...
What should I do for hide this blank black line before loading my timeline data..

Has anyone figured out how to customize the CSS for elements such as the underlining border & arrow pointing to the timeline? I'd like to blend them in to a different background color that isn't white. Here's an example:

How can I use my own images as icons of the timeline (eg. the logo of my institute)?

Hi,
I am trying to use "react-vertical-timeline-component" component and all works well
but when I am trying to minify it using "uglifiy-js" I got this exception:
'Unexpected token: name (VerticalTimelineElement)'

looks like a transpile issue
I use all import options but it still doesn't work including dist-modules and dist-es6

This is the code:

Can you help?
Thanks,

Hi,

I want to use this timeline, but I have many (> 10000) records to display.

Can I load new content as I scroll down a page?
When you get to the bottom of the content, some function is called and automatically loads new content and appends it to the bottom.

Thanks.

any plans on supporting typescript?

someone made an implementation but it's not actively mantained (currently stuck on 2.0.5) https://github.com/simonefonda/react-vertical-timeline-types/blob/master/index.d.ts

Page rendering code

Originally posted by @Binz95 in #59 (comment)

I see following with nextjs:

[ error ] /Users/user/Documents/myproject/client/node_modules/react-vertical-timeline-component/style.min.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm

I copied that file style.min.css out of node_modules, but still I see:

[ error ] ./src/styles/vertical.timeline.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm

Can you please suggest something? thanks.

Hello! Your time line is great, is it possible to have animations work on mobile? Thank you.

Can we make the date time on the left side of line

what is the right way to add an Icon?

tested only on chrome mobile on Android device(Pixel 2).

steps to reproduce:

visit https://stephane-monnot.github.io/react-vertical-timeline/#/demo on a mobile chrome browser.

scroll down the timeline. You will notice the content jumps.

update: the issue only exists for media query break-points 1024px and smaller when using chrome devtools

Whenever the layout prop is set to {"2-columns"}, either explicitly or by default, the 1-column layout still renders.

See example: https://codesandbox.io/s/stoic-lovelace-x8vxp?fontsize=14&hidenavigation=1&theme=dark

When I try to set a border-image CSS value to .vertical-timeline-element-content, I only get tiny squares at the corners of the balloon instead of getting a full border. I'm attempting to set the border as a gradient (using linear-gradient), while setting border works fine.

SCSS

.vertical-timeline-element {
  .vertical-timeline-element-content {
    border: 10px 0 0 0;
    border-image: linear-gradient(to right, #FF0000, #000000);
  }
}

Hi
Looking for some more feature like

• Want to give +/- Button or review Button with each timeline post..Something like Stackoverflow provide.
  -Want to add feature like Share/Like/Retweet/Comment etc with each timeline post.

Is this type of flexibility will be available ? or this requirement can be feasible to achieve with your component.

Version 2.5.0 does not work in my typescript/webpack project. Version 2.4.0 did not have this issue:

ERROR in vendors~Events.bundle.js from UglifyJs
Unexpected token: keyword «const» [./node_modules/react-vertical-timeline-component/dist-es6/VerticalTimeline.js:16,0][vendors~Events.bundle.js:71,0]

ERROR in vendors~Events.bundle.js from UglifyJs
Unexpected token: keyword «const» [vendors~Events.bundle.js:71,0]
`̀ `

Update https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-vertical-timeline-component/index.d.ts
Version 2.3

Hey Stephane

Firstly, Cheers for the beautiful work!

The issue I've been facing is with the date text. With every alternate VerticalTimelineElement the date text overlaps with the Icon (when the date is to the left and content to the right).

Also, in the following setting:
iconStyle={{ background: 'rgb(237, 123, 53)', color: '#11287f' }}

color seems to have no effect on the icon.

As seen on https://stephane-monnot.github.io/react-vertical-timeline/#/demo
If you scroll down very slowly, elements on the left only appear when there is space to render the entire element. As seen in the screenshot below, the next element is not shown as there's still not enough space to render it fully:

On the other hand, elements on the right gets rendered immediately (partially visible):

This inconsistent behavior should be fixed.
Ideally provide a way to customize the space needed before the element is shown (eg. render only when there's at least 20px on the view port to render the element partially).

 constructTimeLine = () =>{
        return(
            <VerticalTimeline>
                {this.progressArray.map((object,i)=>
                    <VerticalTimelineElement
                        key={i}
                        className="vertical-timeline-element--work"
                        style={{backgroundColor:object.color}}
                        iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
                        date="2011 - present"
                    >
                    <p>
                   {object.comments}
                    </p>
                    </VerticalTimelineElement>
                    )
                }
            </VerticalTimeline> 
        )
    }
    render(){
       return(
            <div>
                <Header
                name={this.state.name}
                imgUrl={this.state.profileImgUrl}
                />
                {this.constructTimeLine()}
            </div>
       )
    }

I call constructTimeLine() which returns the Vertical Timeline with a map to render the elements. So the elements themselves will not render, it remains empty. If I add the style for the background color to the element it renders the div with the background color but no text will render. No icon, no date and no text in the timeline element.

The component is awesome but it wants some updates to do that
i m getting this error

./src/views/History/History.js
Module not found: Can't resolve '@material-ui/icons' in 'E:\ex\coreui-client\src\views\History'

Somewhat new to React, so this might be a dumb fix...

Below code is me trying to create a simple Vertical Timeline using this package. When I deploy it, the styles don't get picked up?

Full component code here

Projects.js

import React from 'react';
// import '../resume.scss'
import {
  VerticalTimeline,
  VerticalTimelineElement,
} from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';
import { FaSuitcase, FaSchool, FaStar } from 'react-icons/fa';

const Projects = () => {
  return (
    // <div>test</div>
    <VerticalTimeline>
      <VerticalTimelineElement
        className="vertical-timeline-element--work"
        contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
        contentArrowStyle={{ borderRight: '7px solid  rgb(33, 150, 243)' }}
        date="2011 - present"
        iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
        icon={<FaSuitcase />}
      >
        <h3 className="vertical-timeline-element-title">Creative Director</h3>
        <h4 className="vertical-timeline-element-subtitle">Miami, FL</h4>
        <p>
          Creative Direction, User Experience, Visual Design, Project
          Management, Team Leading
        </p>
      </VerticalTimelineElement>
      <VerticalTimelineElement
        iconStyle={{ background: 'rgb(16, 204, 82)', color: '#fff' }}
        icon={<FaStar />}
      />
    </VerticalTimeline>
  )
}

export default Projects

Browser tools

import React, { Component } from 'react';
import { httpRequest } from '../../util/network';
import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';
import { Icon } from 'antd';

export default class AboutUs extends Component {
    constructor(props) {
        super(props);
        this.state = {
            info: []
        }

    }

    componentWillMount() {
        this.getAboutUsInfo();
    }

    getAboutUsInfo() {
        httpRequest({
            url: HOST_IP + 'api-perf-load-rest/system/aboutus',
            method: 'GET',
            credentials: 'include',
            headers: {
                "content-type": 'application/json',
            },
        }, (response) => {
            this.setState({ info: !!response.value ? response.value : [] });
        }, (response) => {
            this.setState({ info: [] });
        })
    }

    render() {
        return (
            <div>
                <div style={{margin:"10px 0px 10px 10px"}}>

                    关于我们

                </div>
                <div className="break-line"></div>
                <div>
                    <div style={{ textAlign: "center", margin: "10px 0px 10px 0px" }}><font size="6">我们是谁?</font></div>
                    <div style={{ textAlign: "center", margin: "10px 0px 10px 0px" }}><font size="3">
                        <div style={{ margin: "4px 0px 10px 0px" }}>性能测试平台是红星平台保障部门出品的性能测试服务平台</div>
                        <div style={{ margin: "4px 0px 10px 0px" }}>它服务于公司所有的C，B，E端产品，致力于产品的性能把控和质量提升。</div>
                        <div style={{ margin: "4px 0px 10px 0px" }}>性能测试服务平台包含接口压测，查看压测结果和压测报告，以及查看生产上的应用,组件和接口的消费指数。</div>
                    </font></div>
                    <div style={{ textAlign: "center", margin: "50px 0px 10px 0px" }}><font size="6">我们的历程</font></div>

                    <VerticalTimeline>
                        <VerticalTimelineElement
                            className="vertical-timeline-element--work"
                            date="2011 - present"
                            iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
                            icon={<Icon type="smile-o" />}
                        >
                            <h3 className="vertical-timeline-element-title">Creative Director</h3>
                            <h4 className="vertical-timeline-element-subtitle">Miami, FL</h4>
                            <p>
                                Creative Direction, User Experience, Visual Design, Project Management, Team Leading
                            </p>
                        </VerticalTimelineElement>
                    </VerticalTimeline>
                </div>
            </div>
        )
    }

this is my code ,and looks like this:

I have a problem with Alignment of cards (it's a little bit aligned to the left <-)
and a big problem with scrolling (the -> right-side cards don't appears)

unfortunately I think it's a problem with a dependency, because for comparing purposes I also downloaded your "resume" to see if I could find my solution there, but I ran a "npm install" in your "resume" repo, and after I ran a "npm start" and also the problem is there.

so I think some dependency has updated and make a conflict with this timeline-component. I tried to fix by my own, but I can't find the source of the issue :(

this is my package.json
"dependencies": {
"@fortawesome/fontawesome-free-brands": "^5.0.13",
"@fortawesome/fontawesome-free-regular": "^5.0.13",
"@fortawesome/fontawesome-free-solid": "^5.0.13",
"@fortawesome/fontawesome-svg-core": "^1.2.2",
"@fortawesome/react-fontawesome": "^0.1.2",
"bootstrap": "^4.1.3",
"jquery": "^3.3.1",
"npm": "^6.4.1",
"popper.js": "^1.14.4",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4",
"react-vertical-timeline-component": "^2.1.3",
"styled-components": "^3.4.4"
},

It would be nice to be able to handle click events from the icon element. I know you could attach it to the element passed as the icon but any many cases those don't fill up the entire icon element and thus aren't great click handlers.

Passing down additional event handlers would be cool too.

In src/VerticalTimelineElement.jsx:

<span style={iconStyle} className={`vertical-timeline-element-icon ${this.state.visible ? 'bounce-in' : 'is-hidden'}`}>{icon}</span>

Apply it only in V2.

src>components>main-style.scss
@import '~bulma/bulma.sass';

importing this forces my timeline to be hidden due to bulma's 'is-hidden' feature. No matter how specific I get (and !important tag), I cannot override this selector.

Any suggested fixes?

Hi friends

I was trying to put the Workicon in my code I tried also to import but it doesnt work.

I was also trying to add this icon from semantic ui but it doesnt work. Can you please tell how to include this icon in your library?
https://react.semantic-ui.com/elements/icon/

Thanks

I am using react-vertical-timeline with react-scroll, but it seems like i am having a conflict between the 2 components.

When i click on a scroll Link, the page stop scrolling in the middle of the vertical-timeline.
But, if i load the page and i scroll to the bottom (So i have displayed the entire content of the page) then the scroll links will work perfectly..

Anyone already had this issue??

Thanks

Hi
Can you please tell if this component support Pagination feature...Suppose i want to load 10 record a time and when click on next then next 10 should load or scrolling down should load next 10 items?

maybe you should build the release again with babel-polyfill thx

The event handler is not working as I had reinstall all node modules after you have merged and I lost my local changes. And it stopped working. I have gone through VerticalTimelineElement.js and changes are not there. Please check.

Hi

I try to override the "vertical-timeline::before" to disable it from the page but I can't do that with simple css class like this

.vertical-timeline-element--work::before {
content: "";
position: absolute;
top: 0;
left: 18px;
height: 130%;
width: 4px;
background: #fff;
}

please help me if you can

Hello, I see that you can add boxes to each side of the timeline, but I would like to add boxes to both sides as to be able to make comparisons between events. Something like:

 ⃞ ┼ ⃞  
 ⃞ ┼ ⃞  

Is this possible with this component?

Kind Regards

Is this supported in react native?

If I choose the 1-column layout, the date is automatically placed at the bottom of the tile. I would like to place it on the left of the Icon. Just like it does for the 2-column layout. Is this possible?

Thanks!

May I please get your advice on this?

I'm currently working with 2 components, your amazing component here, and react-sticky-el. In the process, I've got other areas working nicely w/ sticky, but this component decides to lay on top of the sticky areas, whereas other components are properly going under it. (note all sub-components, including this one, are laid out below the sticky component.

1. I don't really understand how to adjust the z-index with your code. The goal with this approach would be to have your timeline continue to scroll but go under the sticky elements.
2. Maybe the first bullet point isn't the way to go. Is there a suggestion you have? Maybe approach it like a bounding-box?

Anyway, thanks for this sharing your component!
Kelly

I need onTimelineElementClick, iconClassName, so...