CODEWITHSUNDEEP
reactjstypescriptrequirejs
AntonIva
AntonIva

Reputation: 608

Example of using 3rd party React component to RequireJS, TypeScript project

How to import 3rd party React components to Typescript TSX files?

I have a pretty big JavaScript front-end project which uses:

I want to add two 3rd party React components:

To make things little clear, I have created a basic lightweight project that duplicates basic tools on the GitHub (https://github.com/mgrackerl/react-requirejs-example) where you can try your code.

About the sample project files:

To use the DatePicker, what I want as final result is something like this:

import React = require('react');
import ReactDOM = require('react-dom');
import DatePicker = require('react-datepicker');

let handleChange = function(date: Date) {
   this.setState({
     startDate: date
   });
};

var myDivElement = <div>
    <DatePicker
        selected={new Date()}
        onChange={handleChange} />
</div>;
ReactDOM.render(myDivElement, document.getElementById('example'));

Upvotes: 0

Views: 1210

Answers (1)

AntonIva
AntonIva

Reputation: 608

After some digging in GitHub issues, finally, I have imported the DatePicker component.

Commit: https://github.com/mgrackerl/react-requirejs-example/commit/4afcd28db1ee0f5a9fa0fe65bf505e521814f562

Notes about importing react-datepicker component:

1) Have to bring typings files to the project to make Typescript compiler work (the github project dir: typings/react-datepicker)

2) For the DatePicker component, we have to use MomentJS (http://momentjs.com/) not a Javascript Date object.

scripts/main.tsx file:

/// <reference path="../typings/index.d.ts" />

import React = require('react');
import ReactDOM = require('react-dom');
import DatePicker = require('react-datepicker'); // 3rd party DatePicker component
import moment = require('moment'); // use for the DatePicker component

// callback function for DatePicker onChange event
let handleChange = function(){
  return function(date:any) {
    console.log("data is: " + date);
  }; 
} 

// Create new React component that consumes 3rd party DatePicker component
var myDivElement = <div>
        <DatePicker
            selected={moment()}
            onChange={handleChange} />
</div>;
// Render newly create "myDivElement" component
ReactDOM.render(myDivElement, document.getElementById('example'));

And of course setup RequireJS settings:

require.config({
    "urlArgs": "v=01",
    "baseUrl": "",
    "paths": {
        "react": "node_modules/react/dist/react",
        "react-dom": "node_modules/react-dom/dist/react-dom",
        "moment": "node_modules/moment/min/moment.min",
        "react-onclickoutside": "node_modules/react-onclickoutside/index",
        "react-datepicker": "node_modules/react-datepicker/dist/react-datepicker",
        "main": "scripts/main",
    },
    "shim": {
        "datatable": {
            "deps": ['jquery']
        },
        "dtbootstrap": {
            "deps": ['datatable']
        },
    },
    jsx: {
        fileExtension: ".js",
    }
});

Upvotes: 0

Related Questions