How to "import" a 3rd party javascript module to my react project?

Question

I'm trying to tweak this module called react-add-to-calendar to support onClick events when clicking the dropdown items since the creator of the library seems to be not maintaining it anymore. I've moved the ReactAddToCalendar.js file over to my project and require it like this:

import AddToCalendar from 'apps/bookings/components/ReactAddToCalendar'

And also have a ReactAddToCalendar.d.ts that looks like this according to this answer:

declare module "ReactAddToCalendar";

But now I'm getting this error:

File '.../{project_name}/app/javascript/apps/bookings/components/ReactAddToCalendar.d.ts' is not a module.

I've tried looking everywhere on how to get over this but I can't find anything.

Answer 1

You have to install it like this from your command line:

npm install react-add-to-calendar --save

and then you only have to put this in the desired component:

import AddToCalendar from 'react-add-to-calendar';

Example from the git of the component:

import React from 'react';
import AddToCalendar from 'react-add-to-calendar';

class Example extends React.Component {
  static displayName = 'Example';
  state = {
    event: {
      title: 'Sample Event',
      description: 'This is the sample event provided as an example only',
      location: 'Portland, OR',
      startTime: '2016-09-16T20:15:00-04:00',
      endTime: '2016-09-16T21:45:00-04:00'
    }
  };

  render() {
    return <AddToCalendar event={this.state.event}/>;
  };
}

the instructions are right over there. Or you cant install the modules from NPM?