TimeLineHeaders renders in the wrong position together with react-hot-loader

[westn]

Describe the bug
Using react-hot-loader together with a custom TimeLineHeader will cause the custom component to render under .rct-scroll instead of replacing the original .rct-header-root

To Reproduce

Use react-calendar-timeline inside a project with react-hot-loader (https://github.com/gaearon/react-hot-loader)

Create a TimeLine with a custom TimelineHeader, e.g., with the basic example.

import Timeline, {
  TimelineHeaders,
  SidebarHeader,
  DateHeader,
} from 'react-calendar-timeline';
import moment from 'moment';
...
<Timeline
            groups={groups}
            items={items}
            defaultTimeStart={moment().add(-12, 'hour')}
            defaultTimeEnd={moment().add(12, 'hour')}
          >
            <TimelineHeaders>
              <SidebarHeader>
                {({ getRootProps }) => {
                  return <div {...getRootProps()}>Left</div>;
                }}
              </SidebarHeader>
              <DateHeader unit="primaryHeader" />
              <DateHeader />
            </TimelineHeaders>
          </Timeline>

(I might be able to add a working example a bit later)

Expected behavior
Expect it to replace the custom header as intended.
From what I've found it seems to be related to this comparison:

react-calendar-timeline/src/lib/Timeline.js

Line 915 in a3ce705

if (child.type === TimelineHeaders) {

Something which already was discussed for other react-hot-loader issues in gaearon/react-hot-loader#304

Library Version
0.25.4

Desktop (please complete the following information):

• OS: MacOS
• Browse Chrome
• Version 75

Additional context
It seems like it's somewhat related to react-hot-loader, but something that they don't seem willing to fix.

[westn]

Here is a codesandbox for repro: https://codesandbox.io/s/react-hot-loader-o4sgz

[westn]

An incorrect, but a functional solution to this is replacing the comparison with:

const a = child.type.prototype.constructor.displayName;
const b = _TimelineHeaders2.default.prototype.constructor.name;
if (a === b) {

thus using the name of the component.

[Ilaiwi]

@westn please feel free to submit a PR make this work with rhr. Otherwise, I am not going to spend resources on this since it is not related to the library itself...

[Ilaiwi]

I am reopening this since now I am facing the same issue with a new codebase.

[Ilaiwi]

@westn tried your solution but no luck with this solution

[Ilaiwi]

released in 0.26.4