aaron9000 / react-image-timeline Goto Github PK

• Provide working code snippet
• Present Typescript defs instead of tables
• Provide a large set of sample events (same set as the demo)

The error

Here is the error message when I used the react typescript template:

TypeScript error in <root>/src/index.tsx(7,22):
File '<root>/node_modules/react-image-timeline/index.d.ts' is not a module.  TS2306

     5 | import * as serviceWorker from './serviceWorker';
     6 | 
  >  7 | import Timeline from 'react-image-timeline';

To reproduce it:

npx create-react-app my-app --template typescript
# add the following line to index.tsx file as shown in the error message
# import Timeline from 'react-image-timeline';

The workaround

If I replaced the <root>/node_modules/react-image-timeline/index.d.ts with <root>/node_modules/react-image-timeline/dist/timline.d.ts, it worked as expected.

hey, thanks for your work on this, it would be good to make the button optional if not passed in the event object.

It would be cool if the timeline images optionally started with a placeholder while they loaded. Currently, the timeline shifts around while images pop in.

I was running into problems (related to browserify/babelify), because apparently the code was not compiled from ES6 to ES5 before publishing it to npm.

now it is

The distance is too long

Hello, I'm getting an error related to the use of PropTypes in React 16+. Are you planning on updating the codebase? If so, here's an article to look at,

https://reactjs.org/warnings/dont-call-proptypes.html

It's overriding users' global settings on other components.

Here is the error I run into after npm run script on the Example Project.

TypeError: Object(...) is not a function

68 | ) => {
| ^ 69 | const [imageType, setImageType] = useState('normal');
70 | const [events, setEvents] = useState(getSampleData(imageType));
71 | const [useCustomComponents, setUseCustomComponents] = useState(false);`

I'm having trouble trying to use local images. Is that feasible?

This works in the img tag, but not in the events tag.

import React, { Component } from 'react';
import Timeline from 'react-image-timeline';
import thePicture from '../images/thePicture.jpg';
require('react-image-timeline/dist/timeline.css');

class Test extends Component {
  render() {
    const events = [{
      date: new Date(2013, 9, 27),
      text: "Sed leo elit, pellentesque sit amet congue quis, ornare nec lorem.",
      title: "The Picture",
      imageUrl: '../images/thePicture.jpg'
    }]

    return (
      <div className=''>
      	OurStory
        <img src={thePicture} />              {/*  Renders Picture  */}
        <Timeline events={events} />          {/*  Does Not Render Picture  */}
      </div>
    );
  }
}

export default Test;

Hi I love this react image timeline, but can it be displayed horizontal? If not I'll be glad to help to get a horizontal versión with your help

Regards

I followed a really default setup from the npm page to see how it worked, but I think there's an issue with how the date is parsed.

This simple code:

<Timeline events={[{
                date: Date.parse("2013-09-27"),
                text: "Sed leo elit, pellentesque sit amet congue quis, ornare nec lorem.",
                title: "Cairo, Egypt",
                imageUrl: "http://github.com/aaron9000/react-image-timeline/blob/master/src/assets/cairo.jpg?raw=true"
}]} />

Produces the error:

TypeError: e.getFullYear is not a function

I would suspect something is going wrong if this basic example fails.