General Calendar Cards Color Date & Time Event Calendar Forms Grid Layout Image Listview Measurement Navigation Number Numpad Option List Page Popup Range Scroller Scrollview Select Timer Timespan Treelist Tools Accessibility

Using Mobiscroll with Meteor react

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

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!

Using the Mobiscroll CLI and NPM to install it in your Meteor app

Step 1: Create an app

If you don't have an app at hand, you can read more about creating a React Meteor app. If you already have an app, you can skip this step.

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

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
Please note The built in meteor npm install doesn't support global installation at the moment and you won't be able to install the Mobiscorll CLI with it.

Run mobiscroll config react in your terminal window.

$ mobiscroll config react
Please note The config command will automatically copy the Mobiscroll font files in your public directory. The resource copy is needed in order to the Mobiscroll font files load correctly.

Step 3: Import mobiscroll resources to your React component

Importing the js and css:

import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

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

To test it let's use the following example and add to one of your react component. Add the mobiscroll imports and the Date picker initialization as it is in the below example.

import React, { Component } from 'react';
import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';
 
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
   
  render() {
    return (
      <div className="container">
        <label>
             Birthday
             <mobiscroll.Date placeholder="Please Select..." />
        </label>
      </div>
    );
  }
}

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

$ meteor