Welcome to the Mobiscroll API Reference. You can find the most up to date information about usage and customization options here.

Having trouble? Ask for help.

Getting Started with Mobiscroll for React

Mobiscroll is a collection of UI components that helps deliver great mobile apps, websites with a great user experience and in getting five-star app store reviews. The controls follow platform UX guidelines and can be styled with the Theme Builder for a perfect fit.

What is React?

React is a JavaScript library for building user interfaces. Mobiscroll for React is a collection of React Components that help you use the Mobiscroll Controls in a React application.
More about React...

Using the Mobiscroll CLI and NPM

Step 1: Create an app

If you don't have an app at hand, create a starter with the Create React App (sudo access might be required).

$ npx create-react-app my-app
$ cd my-starter

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

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Run mobiscroll config react in your terminal window.

$ mobiscroll config react --version=4

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

Here is how can the Mobiscroll resources be imported to a React component:

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

If the application is configured with the cli's --no-npm mode, the js import will remain the same, only the css import location needs to be modified to the following:

import "@mobiscroll/react/dist/css/mobiscroll.react.min.css";

To test it let's import the Mobiscroll resources and add a simple Mobiscroll Date picker to your component's render function. If you just created a new app you the modify the src/App.js file.

import React, { Component } from 'react';

/* import Mobiscroll JS and CSS */
import mobiscroll from "@mobiscroll/react";
import "@mobiscroll/react/dist/css/mobiscroll.min.css"; /* change the css location if you are using the cli config with --no-npm */

class App extends Component {
  render() {
    return (
      <div className="App">
         <label>
             /* Add Date component  */
             Birthday
             <mobiscroll.Date placeholder="Please Select..." />
        </label>
      </div>
    );
  }
}
export default App;

To build the app just run the npm start in the CLI:

$ npm start

Communication with Mobiscroll Components

React's policy to communication between components is also valid when using the Mobiscroll Components: passing props from parent to child and using event handlers.

/* inside your component */
getDefaultProps: function() {
    return {
        displayMode: 'top'
    };
},
dateSelected: function(event, inst) {
    this.setState({
        myDate: inst.getVal()
    });
},
render: function() {
    return 
        <div>
            <label>MyDate:</label>
            <mobiscroll.Date value={this.state.myDate} theme="ios" display={this.props.displayMode} onSet={this.dateSelected} />
        </div>;
}

/* inside your component */
getDefaultProps: function() {
    return {
        settings: {
            display: 'top',
            theme: 'ios',
            onSet: function(event, inst) {
                this.setState({ myDate: inst.getVal() });
            }.bind(this)
        }
    };
},
render: function() {
    return 
        <div>
            <label>MyDate:</label>
            <mobiscroll.Date value={this.state.myDate} options={this.props.settings} />
        </div>;
}

/* inside your component */
getDefaultProps: function() {
    return {
        settings: {
            display: 'top',
            theme: 'ios'
            onSet: function(event, inst) {
                this.setState({ myDate: inst.getVal() });
            }.bind(this)
        }
    };
},
render: function() {
    return 
        <div>
            <label>MyDate:</label>
            <mobiscroll.Date value={this.state.myDate} options={this.props.settings} theme='my-custom-ios-theme' />
        </div>;
}

In the above example my-custom-ios-theme takes precedence over the ios theme since it is passed as an individual attribute

Reaching the mobiscroll instance

Because sometimes it is inevitable to call methods on the mobiscroll instance (ex. show, hide, refresh), the mobiscroll instance is available as the instance property in the mobiscroll react components. It can be reached after the componentDidMount fired, by setting a ref to the component.

/* inside your component */
showPopup: function () {
    this.refs.myPopup.instance.show();
},
render: function() {
    return <div>
        <button onClick={this.showPopup}>Show</button>
        
        <mobiscroll.Popup ref='myPopup'>
            <h3 className="md-text-center">Hi</h3>
            <p className="md-text-center">Are you feeling good today?</p>
        </mobiscroll.Popup>
    </div>;
}

Customizing the rendered element

By default mobiscroll renders an <input /> element for its controls with a few exceptions (ex. Eventcalendar, Listview, Menustrip etc.) To style and customize the look of the input, you can use the following properties on the mobiscroll components, and they will be passed along to the input: className, disabled, placeholder, readonly, style. Some components support other attributes as well. These are listed on their individual sections.

<mobiscroll.Date className='my-custom-class' disabled={true} />

If other attributes are needed on the input, the wrapping of the input with the mobiscroll component is also supported

<mobiscroll.Date>
    <input type='text' className='my-custom-class' disabled={true} data-my-custom-attribute='myAttr' />
</mobiscroll.Date>

Initial and default values

Since the Mobiscroll Components maintain their own state, they always use uncontrolled inputs (more on react forms).

The value attribute on the Mobiscroll Components is responsible for binding the mobiscroll value. It should be placed always on the Mobiscroll Component, even when there is an input children inside the mobiscroll component.

<mobiscroll.Datetime value={this.state.myAppointment} />
<mobiscroll.Temperature value={this.state.outsideTemperature} />

Global Settings

mobiscroll.settings

Description

The global mobiscroll object is the place where you can set all the options that you'll be needing across your application or page. It should contain the settings that need to be the same across all components.

// Sets the theme to iOS and localization to German
mobiscroll.settings = {
    theme: 'ios',
    lang: 'de'
};

For more examples check out the demo page.