First of all: Thanks for this great component!

I am facing a problem centering the icon of a TimelineEvent. (I am using Material-UI.)

It currently looks like this:

I found issues #7 after which you introduced iconStyle. I am using the following code:

import PhoneIcon from 'material-ui-icons/PermPhoneMsg';

[...]
            <TimelineEvent
              title={update.title}
              createdAt={moment(update.timestamp).format(DATE_TIME_FORMAT)}
              icon={<PhoneIcon />}
              iconStyle={{ marginLeft: 0, marginTop: 0 }}
              iconColor="#5C6BC0"
            >
              {update.description}
            </TimelineEvent>
[...]

It seems that iconStyle is changing the style of the complete Icon, but not the actual icon enclosed.

If I change the value to iconStyle={{ marginLeft: 20, marginTop: 20 }} it looks like this:

What I want to achieve is to move the phone icon within the TimelineEvent icon.

I am fairly new to React (Java developer here ;) therefore I hope I don't miss anything obvious.

Kind regards

I'd like to have the time display on the left side of the line and the rest of the content on the right. It would be easier to read times going up and down. Is there an easy way to do this?

m trying to create events dynamically but m getting exception 'Component's children should not be' mutated.

Hello, the property iconStyle in TimelineEvent does not work. You forgot to include the spread operator. It worked in earlier versions. See here

d4081a7#diff-625e8e59f6c96f4ff7ffa9978e9abb73R31

Hello, right now it's only allowed to pass the iconColor for the bubble. It might be a better idea to allow a whole style object similar to iconStyle.

https://github.com/rcdexta/react-event-timeline/blob/master/components/TimelineEvent.js#L6-L8

Would be nice if I could provide my own styles to the icon. I'm using FontAwesome, which has a different offset than the material-icons you're using. The Avatars i'm showing as Icon, don't need the 8px margin as well.

Sometimes I just want a title and that's it. A body is not always wanted.

Look for example at a github timeline:

is there any way to change container box background color from the default white to any custom color?

Hi, nice project.

I would like to style the card header, looks like it is hardcoded into here:
https://github.com/rcdexta/react-event-timeline/blob/master/components/TimelineEvent.js#L43

Would be nice to have a new prop to be able to style this.

Thanks!

I have a TimelineEvent which I'm using in a dark theme and so the default text colour for the createdAt date attribute is too dark against the dark theme background and doesn't show up very well!

I would like to restyle the createdAt date however none of the existing style props appear to affect the createdAt styling! I've tried all the various styles e.g. style, titleStyle, subtitleStyle etc and none of them can be used to modify the createdAt date styling.

The only way to override this it seems is to either just use my own css or perhaps render the createdAt attribute as a Dom node and attach my own custom styling to that, though I haven't tried that yet.

Am I missing something? Is there an easy declarative way of setting the styling on createdAt?

Thanks!

React.cloneElement(...): The argument must be a React element, but you passed null.
The above error occurred in the component: in Timeline (created by TimelineComponent)

https://github.com/rcdexta/react-event-timeline/blob/master/components/Timeline.js#L8
https://stackoverflow.com/questions/55327901/react-treats-timeline-element-as-null-even-with-a-condition-check/55328070#55328070

Hey guys! I don't see a way to pass a color for the line ( the one between the icons ).

Thx!

Want to use the neat collapse feature which I saw is pretty new, however it does not work as it seems the property is not recognized. Copying the code from your storybook:

https://rcdexta.me/react-event-timeline/?selectedKind=Timeline&selectedStory=TimelineEvent%20with%20collapsible%20content&full=0&down=0&left=1&panelRight=0

gives me error:

Warning: Received true for a non-boolean attribute collapsible.
If you want to write it to the DOM, pass a string instead: collapsible="true" or collapsible={value.toString()}.

Using version 1.5.4. I noticed that the merge of that feature to master gave a compile error so that's probably why?

Any possibility of small upgrades on this?

A picture is worth a thousand words:

Hello,
I want to reduce the bubble size to look something like that:

I used bubbleStyle to update the width and height but it then looks like that:

The solution would be to change the 'left' property of the bubble but it's always overwritte here.

mergeNotificationStyle(iconColor, bubbleStyle, orientation) {
    const iconColorStyle = iconColor ? {...s.eventType, ...{color: iconColor, borderColor: iconColor}} : s.eventType
    const leftOrRight = (orientation === 'right') ? {...s['eventType--right']} : {...s['eventType--left']}
    return {...iconColorStyle, ...bubbleStyle, ...leftOrRight}
  }

the solution seems to be to switch ...bubleStyle and ...leftOrRight.

mergeNotificationStyle(iconColor, bubbleStyle, orientation) {
    const iconColorStyle = iconColor ? {...s.eventType, ...{color: iconColor, borderColor: iconColor}} : s.eventType
    const leftOrRight = (orientation === 'right') ? {...s['eventType--right']} : {...s['eventType--left']}
    return {...iconColorStyle, ...leftOrRight, ...bubbleStyle}
  }

what do you think?

This is probably related to issue #13 and presumably has a similar fix.

I've found that iconStyle does indeed now work for TimelineEvents but the exact same property applied to TimelineBlips doesn't appear to append the css content to the icon styling.

Similarly, I've found that the 'style' property works for TimelineEvents but not for TimelineBlips.

TimelineEvent.js#L48-L49

  title: React.PropTypes.string.isRequired,
  createdAt: React.PropTypes.string.isRequired,

Thank you.

is it working properly for rtl apps?

Hi,

Thanks for this awesome library, we have a use case where we need alternating the card, is it possible in the TimelineEvent component to pass an orientation like Timeline?

Ideally:

The style property (containerStyle) is only being applied when the TimelineEvent is being displayed as card. I like to use it to add some margin between my events. So this behavior feels wrong.

https://github.com/rcdexta/react-event-timeline/blob/master/components/TimelineEvent.js#L28

i got a React prop warning , how can i fix it ?

at https://codesandbox.io/s/13k1jjqj64

when collapsible is set , it is not possible to change the state of showContent again. It breaks the react page.

An older version of React is being loaded as a dependency:

I think it should be loaded as per dependency.

I am using your package to implement timeline in my project. Works great. Furthermore, I want to pass some event listeners to TimelineEvent component like:

<TimelineEvent
          createdAt="2016-09-11 09:06 AM"
          icon={<i className="uk-icon-envelope uk-icon-small" />}
          iconColor="#03a9f4"
          title="Added payment method."
          onClick={handleCollapse}
          onHover={handleHover}
 >

Currently, it does not seem to have these props, are you planning to add these or any way I can workaround? All I want is to fire some event, when user clicks on the TimelineEvent title or hovers over it. Thanks in advance.

Hello,

I'm trying to populate the component with variables, one of them returns the text entered by the user, however, the component is showing the html tag ... can anyone help?

When using the timeline event like this:

      <TimelineEvent
      title={title}
      createdAt={moment(event.dateTime).format('MMMM Do, h:mm:ss a')}
      container="card"
      icon={icon}
      iconColor={iconColor}
      contentStyle={{display: show}}
      key={`event#${index}`}
      className={styles.incidentTimeLineEvent}
      >

I get this warning:

Warning: Unknown prop container on < div > tag. Remove this prop from the element.

I want to display createdAt time in "time ago" format which is updated after every 5 seconds.
I've created function to display time in that format now

how can I dynamically update the display.I change value of var which display 0 sec ago after every 10 sec but it's not updating the view.
ps:please excuse the content of feed 😆

Hello,

I was going through this library and felt that these features would make it way more awesome:

• Ability to Search Timeline Events with free text
• Pagination/Infinite Scroll
• Ability to separately define directions for each subtitle/title/event on either left or right of the timeline.
• Expand/Collapse ( wrap long content) for a Timeline event #

Nice to see ability to change line color by propType. In my opinion to have consistency, it should be lineStyle propType. then we could change other things (line width, left position)

Its only sugestion.

Hi,

When collapsible = true.

Is it possible to change '...' to 'show more'?

I think it's better to have a title and a subtitle to keep the terms more generic. This because there isn't anything special happening with the createdAt anyway. It's just a node, just like title, icon and children.

So, I guess it's better to rename title to subtitle and createdAt to title (because a subtitle should be standing below the title).