Using Mobiscroll with Ionic React

Installing Mobiscroll in your Ionic app takes a couple of minutes. Let's see how you can start with a simple app.

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.

$ ionic start myStarterApp blank --type=react
$ cd myStarterApp

Step 2: Install the Mobiscroll CLI and configure the app

Install Mobiscroll CLI from NPM (you'll only have to do it once).

$ npm install -g @mobiscroll/cli

Run mobiscroll config ionic in your terminal window.

$ mobiscroll config ionic

If you are not logged in already, 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.

Step 3: Import mobiscroll to your page

Just before the configuration is ready, you will be asked if you want to auto-import mobiscroll to your pages. Select your Home.tsx page and hit enter to finish the configuration step.
Now if you open your Home.tsx file, you will see an import there:

import { Datepicker } from '@mobiscroll/react';

Step 4: Let's see if Mobiscroll was installed correctly

To test it let's add a Datepicker to the src/pages/Home.tsx.

For this to work, you will need to add 2 things to the page. First add the IonItem, IonLabel and IonInput to the import statement on the top of the Home.tsx.

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

You will also need hooks, to bind the Mobiscroll Datepicker's value to a state variable:

import React, { useState } from 'react';

You can pass the IonInput component to the datepicker along with the value and onChange props. Here's the Home page after the changes:

const Home: React.FC = () => {
  const [myDate, setMyDate] = useState<Date|null>(null);
  const onMyDateChange = (event: any) => {
    setMyDate(event.value);
  };
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Ionic Blank</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <IonItem>
          <IonLabel>Label</IonLabel>
          <Datepicker onChange={onMyDateChange} value={myDate} inputComponent={IonInput} />
        </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!

How to start a trial

First, start a free trial by entering your email address on the Mobiscroll homepage and create your account.

This is how the free trial works:

1. You can try Mobiscroll for free.
2. The trial needs an active connection to Mobiscroll servers for validation. Don't worry, the licensed product will work offline with downloadable resource files.
   Read about the differences between trial and licensed products.
3. You can upgrade to the licensed product at any time during or after your trial.

Enter your first name, set a password and you're ready to go!

At this point you have a running trial. You can use the email address you provided with your password to continue your setup.