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

Supported Platforms - Android 5+ including Android 11, iOS 9+ including iOS 14 and all major desktop browsers, including Chrome 43+, Firefox 16+, Safari 9+, Edge 12+ and Internet Explorer 11+.

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...

React v15.0 or newer is required for all the mobiscroll components to work properly
The mobiscroll.Listview component also needs the React.addons.TransitionGroup for removal animations.

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).

Note that it could take a couple of minutes until the app is created (depending on your internet connection and machine performance).
$ create-react-app my-starter
$ 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

Run mobiscroll config react in your terminal window.

$ mobiscroll config react --version=5
Please note that the cli helps to install the react version of Mobiscroll from the private npm repository.
You will have to include the mobiscroll module to your react component manually. Please see the following step.

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

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

import { Datepicker, Eventcalendar } 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 a simple Mobiscroll Date picker and add it to the App function. If you just created a new app you the modify the src/App.js file.

import React from 'react';
import { Datepicker } from '@mobiscroll/react';
import "@mobiscroll/react/dist/css/mobiscroll.min.css";

export function App() {
    const [birthday, setBirthday] = React.useState(null);
    const onBirthdayChange = (ev) => {
        setBirthday(ev.value);
    }
    return <Datepicker value={birthday} onChange={onBirthdayChange} label="When were you born?" />
}

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

$ npm start

Using module loaders

Mobiscroll can be loaded as a module as well. It implements the Universal Module Definition (UMD) pattern, meaning that it can be used with module loaders supporting the Asynchronous Module Definition (AMD) (e.g. RequireJS, Webpack, SystemJS) or CommonJS (e.g. Browserify, Webpack, SystemJS) syntax.

To load Mobiscroll as a module, download the mobiscroll package and use it as you would use any other module:

ECMAScript Module example
import React from 'react';
import {render} from 'react-dom';
import * as mobiscroll from 'path/to/mobiscroll/js/mobiscroll.react.min';

class App extends React.Component {
  render () {
    return <mobiscroll.Datepicker theme="ios" display="bottom" />;
  }
}

render(<App/>, document.getElementById('app')); 
CommonJS example
var ReactDOM = require('react-dom');
var React = require('react');
var mobiscroll = require('path/to/mobiscroll/js/mobiscroll.react.min');
 
var DateDemo = React.createClass({
    render: function() {
        return (
            <mobiscroll.Datepicker />
        );
    }    
});

ReactDOM.render(
    <DateDemo />,
    document.getElementById('app')
);

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.

Options passed as individual attributes
function YourComponent(props) {
    const [selected, setSelected] = useState(null);
    const onSelectedChange = (ev) => {
        setSelected(ev.value);
    };
    const [display] = useState('center');

    return <Datepicker value={selected} theme="ios" display={display} onChange={onSelectedChange} />
}
Options passed grouped
function YourComponent(props) {
    const options = useMemo(() => {
        return {
            theme: 'ios',
            display: 'center',
        };
    });
    return <Datepicker options={opt} />
}
Options passed both grouped and individually
function YourComponent(props) {
    const options = useMemo(() => {
        return {
            theme: 'ios',
            display: 'center',
        };
    });
    return <Datepicker options={opt} theme="my-custom-ios-theme" />
}

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. open, close, refresh), the mobiscroll instance can be reached, as any other component in react, by using a ref. The instance is also available in Mobiscroll events as the second argument. You can find a more detailed description on reaching the instance in the Instance section of our docs.

Global Settings

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

// apply options globally to all Mobiscroll components:
setOptions({ theme: 'ios', themeVariant: 'dark' });

Description

With the setOptions method, you can set global options that are needed across your application or page. These options will be applied to all components. Including all the components that are initialized after the setOptions call. Components that were initialized before the setOptions call, will be updated with the new options as well at the time of the setOptions function call.

// Sets the theme to iOS dark
mobiscroll.setOptions({
    theme: 'ios',
    themeVariant: 'dark'
});

For more examples check out the demo page.

Using Mobiscroll v4 alongside v5

The 5th major version of Mobiscroll contains a limited number of components, compared to v4. If you need to keep using some components from v4, which are not present in the newer version, please follow this guide.