Using Mobiscroll components with ES6 modules

Using Mobiscroll packages as ES6 Modules prior to version 5.0.2 were only possible with "Complete" licenses or "Framework" licenses with the source code addon. By having access to the source code of the components, one could take advantage of the Modules and import only the things he needed.

Starting from Mobiscroll v5.0.2 we provide an ESM bundle with all packages, so they can be used as ES6 Modules. This way many bundlers (ex. Rollup, Webpack, etc...) can take advantage of the tree-shaking technique and eliminate dead code. This reduces the bundle size to only what is actually used in the application.

Here comes an example, that imports the eventcalendar and the datepicker components.

To create a project with create-react-app, run the following command:

$ npx create-react-app myapp --use-npm

Next step is to install the mobiscroll package. Depending on the license you have this can be done directly with the Mobiscroll CLI or using the Download Builder and the Mobiscroll CLI together.

$ mobiscroll config react

After creating the app is ready and configured, the App.tsx should have the following source:

import React from 'react';
import './App.css';

import { Datepicker, Eventcalendar } from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.react.min.css';

function App() {
  return (
    <div className="App">
      <Datepicker label="My Range" select="range" />
      <Eventcalendar />
    </div>
  );
}

export default App;

The only step remain to build the app. At this point the Datepicker and Eventcalendar will be bundled into the app without any other Mobiscroll Component that's not used.