Contents

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

Supported Platforms - Android 4.1+ including Android Oreo, iOS 6+ including iOS 11, Windows Phone 10 and all major mobile and desktop browsers

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 is required for all the mobiscroll components to work properly
The mobiscroll.Listview component also needs the React.addons.TransitionGroup for removal animations.

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 mobiscroll from 'path/to/mobiscroll/js/mobiscroll.custom-3.2.5.min';

class App extends React.Component {
  render () {
    return <mobiscroll.Date theme="mobiscroll" 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.custom-3.2.5.min');
 
var DateDemo = React.createClass({
    render: function() {
        return (
            <mobiscroll.Date />
        );
    }    
});

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
/* 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>;
}
Options passed grouped
/* 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>;
}
Options passed both grouped and individually
/* 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 */
showWidget: function () {
    this.refs.myWidget.instance.show();
},
render: function() {
    return <div>
        <button onClick={this.showWidget}>Show</button>
        
        <mobiscroll.Widget ref='myWidget'>
            <h3 className="md-text-center">Hi</h3>
            <p className="md-text-center">Are you feeling good today?</p>
        </mobiscroll.Widget>
    </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.

The defaultValue attribute is used as the mobiscroll's default value, not the inputs default value. So it will set the default position of the scroller - not the actual value selected.
<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.

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

For more examples check out the demo page.