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...
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).
$ 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
On Windows client computers, the execution of PowerShell scripts is disabled by default. When using Powershell, to be able to install the Mobiscroll CLI you will need to set the following execution policy:
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
Make sure to read the message displayed after executing the command and follow the instructions.
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.
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.
// Sets the theme to iOS and localization to German
mobiscroll.settings = {
theme: 'ios',
lang: 'de'
};
For more examples check out the demo page.