Skip to main content

Using Mobiscroll with Ionic

Installing Mobiscroll in your Ionic app takes a couple of minutes. Let's see how you can start with the tabs starter app using react.

Using the Mobiscroll CLI and NPM​

Step 1: Create an app​

Assuming you have node and ionic already installed (if not, you can read about it in the Ionic docs), use the CLI to create a new app. If you already have an app at hand, you can skip this step.

info

Note that it could take a couple of minutes until the app is created (depending on your internet connection and machine performance).

ionic start myStarterApp tabs --type=react
cd myStarterApp

Step 2: Install the Mobiscroll CLI​

Install Mobiscroll CLI from NPM. You'll only have to do this step once on a single development machine. You won't need to repeat this on other machines or production servers.

$ npm install -g @mobiscroll/cli

Step 3: Configure the project using the CLI​

To install the Mobiscroll library from NPM, you will need to open a terminal window in the root folder of you project and run the following command:

mobiscroll config ionic
The CLI handles everything — don't do these manually
  • Do not run npm login — mobiscroll config sets up Mobiscroll's private NPM registry authentication automatically.
  • Do not run npm install @mobiscroll/... — the CLI adds and installs the Mobiscroll package for you.
  • Do not set up a license key manually — the CLI configures your license when you run mobiscroll config.
info

If you're working behind a proxy, additional configuration might be needed. Please check the proxy configuration options of the CLI.

The command will ask for your credentials (email and password). If you already have a mobiscroll account but you are unsure about the details, you find them on your account page. If you don't have an account yet, you can start a trial in no time following these steps.

info

If you already have a license, it is recommended to set up and use team NPM accounts instead of individual developer credentials for installing Mobiscroll.

Step 4: Importing Mobiscroll to your page​

You will need to import the component you want to use and the css from the mobiscroll package:

import { Datepicker } from '@mobiscroll/react'; /* or import any other component */
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

Step 5: Let's see if Mobiscroll was installed correctly​

To test it let's add a Datepicker to the src/pages/Tab1.tsx page. We will use the IonInput component as the base component for the datepicker. When the input is focused, the picker will open.

import {
  IonContent,
  IonHeader,
  IonInput,
  IonItem,
  IonLabel,
  IonPage,
  IonTitle,
  IonToolbar
} from '@ionic/react';
import './Tab1.css';

import { Datepicker } from '@mobiscroll/react'; /* or import any other component */
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

const Tab1: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 1</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Tab 1</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonItem>
          <Datepicker inputComponent={IonInput} inputProps={{ label: 'My Date'}} />
        </IonItem>
      </IonContent>
    </IonPage>
  );
};

To build the app just run the serve command in the CLI:

ionic serve

At this point you have completed the setup. Go build great things!

One more thing

Setting up for CI/CD

The config command in step 3 saves your access token for the Mobiscroll NPM registry in the .npmrc file in the project root. Don't commit the token — keep it in an environment variable and commit a file that only references the variable. For the setup, see Using the npm auth token securely.