You can use the Mobiscroll React API in your React projects and JSX files.
Make sure to have Mobiscroll installed and loaded in your project. See examples (HTML & JSX snippets) that you can grab and try locally.
Calendar
HTML
<div id="content"></div>
JSX
var CalendarDemo = React.createClass({
render: function() {
return (
<div>
<mobiscroll.Calendar
ref="calendar"
placeholder="Please Select..."
/>
</div>
);
}
});
ReactDOM.render(
<CalendarDemo />,
document.getElementById("content")
);View demos and other examples for the Calendar.
Color
HTML
<div id="content"></div>
JSX
var ColorDemo = React.createClass({
render: function() {
return (
<div>
<mobiscroll.Color
ref="color"
placeholder="Please Select..."
/>
</div>
);
}
});
ReactDOM.render(
<ColorDemo />,
document.getElementById("content")
);View demos and other examples for the Color.
Date & Time
HTML
<div id="content"></div>
JSX
var DatetimeDemo = React.createClass({
render: function() {
return (
<div>
<mobiscroll.Datetime
ref="datetime"
placeholder="Please Select..."
/>
</div>
);
}
});
ReactDOM.render(
<DatetimeDemo />,
document.getElementById("content")
);View demos and other examples for the Date & Time.
Event Calendar
HTML
<div id="content"></div>
JSX
var EventcalendarDemo = React.createClass({
getInitialState: function() {
return {
data: [{
start: new Date(2016, 1, 1),
end: new Date(2016, 1, 2),
text: "Conference",
color: "red"
}, {
d: "12/25",
text: "Christmas"
}]
};
},
render: function() {
return (
<div>
<mobiscroll.Eventcalendar
data={this.state.data}
placeholder="Please select..."
/>
</div>
);
}
});
ReactDOM.render(
<EventcalendarDemo />,
document.getElementById("content")
);View demos and other examples for the Event Calendar.
Forms
HTML
<div id="content"></div>
JSX
var FormsDemo = React.createClass({
render: function() {
return (
<div>
<mobiscroll.Form theme="mobiscroll">
<label>
Username
<input name="username" />
</label>
<label>
Password
<input name="password" type="password" />
</label>
<button type="submit">Sign In</button>
</mobiscroll.Form>
</div>
);
}
});
ReactDOM.render(
<FormsDemo />,
document.getElementById("content")
);View demos and other examples for the Forms.
Image
HTML
<div id="content"></div>
JSX
var ImageDemo = React.createClass({
render: function() {
return (
<div>
<mobiscroll.Image enhance={true}>
<li data-val="Share" data-icon="share">
<p>Share</p>
</li>
<li data-val="Delete" data-icon="remove">
<p>Delete</p>
</li>
</mobiscroll.Image>
</div>
);
}
});
ReactDOM.render(
<ImageDemo />,
document.getElementById("content")
);View demos and other examples for the Image.
Listview
HTML
<div id="content"></div>
JSX
var MyListItem = React.createClass({
render: function() {
return <li>{this.props.item.name}</li>
}
});
var ListviewDemo = React.createClass({
getInitialState: function() {
return {
items: [{
id: 1,
name: 'Apples'
}, {
id: 2,
name: 'Cakes'
}, {
id: 3,
name: 'Bottles of Juice'
}]
};
},
render: function() {
return <div>
<mobiscroll.Listview itemType={MyListItem} data={this.state.items} />
</div>;
}
});
ReactDOM.render(
<ListviewDemo />,
document.getElementById('content')
);View demos and other examples for the Listview.
Measurement
HTML
<div id="content"></div>
JSX
var TemperatureDemo = React.createClass({
render: function() {
return (
<div>
<mobiscroll.temperature
ref="temperature"
placeholder="Please Select..."
/>
</div>
);
}
});
ReactDOM.render(
<TemperatureDemo />,
document.getElementById("content")
);View demos and other examples for the Measurement.
Menustrip
HTML
<div id="content"></div>
JSX
var MenustripDemo = React.createClass({
render: function() {
return (
<div>
<mobiscroll.Menustrip>
<li onClick={function() { alert("Menu 1 Clicked!"); }}>Menu 1</li>
<li onClick={function() { alert("Menu 2 Clicked!"); }}>Menu 2</li>
</mobiscroll.Menustrip>
</div>
);
}
});
ReactDOM.render(
<MenustripDemo />,
document.getElementById("content")
);View demos and other examples for the Menustrip.
Number
HTML
<div id="content"></div>
JSX
var NumberDemo = React.createClass({
render: function() {
return (
<div>
<mobiscroll.Number
ref="number"
placeholder="Please Select..."
/>
</div>
);
}
});
ReactDOM.render(
<NumberDemo />,
document.getElementById("content")
);View demos and other examples for the Number.
Numpad
HTML
<div id="content"></div>
JSX
var NumpadDemo = React.createClass({
render: function() {
return (
<div>
<mobiscroll.Numpad
ref="numpad"
placeholder="Please Select..."
/>
</div>
);
}
});
ReactDOM.render(
<NumpadDemo />,
document.getElementById("content")
);View demos and other examples for the Numpad.
Range
HTML
<div id="content"></div>
JSX
var RangeDemo = React.createClass({
render: function() {
return (
<div>
<mobiscroll.Range
ref="range"
placeholder="Please Select..."
/>
</div>
);
}
});
ReactDOM.render(
<RangeDemo />,
document.getElementById("content")
);View demos and other examples for the Range.
Rating
HTML
<div id="content"></div>
JSX
var RatingDemo = React.createClass({
render: function() {
return (
<div>
<mobiscroll.Rating
ref="rating"
placeholder="Please Select..."
/>
</div>
);
}
});
ReactDOM.render(
<RatingDemo />,
document.getElementById("content")
);View demos and other examples for the Rating.
Scroller
HTML
<div id="content"></div>
JSX
var ScrollerDemo = React.createClass({
render: function() {
var scrollerWheels = [
[{
circular: false,
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]
}, {
circular: false,
data: ["-", "1/4", "1/2", "3/4"]
}, {
circular: false,
data: units
}]
];
return <mobiscroll.Scroller wheels={scrollerWheels} onSet={this.valSelected} className="my-scroller"/>;
}
});
ReactDOM.render(
<ScrollerDemo />,
document.getElementById("content")
);View demos and other examples for the Scroller.
Select
HTML
<div id="content"></div>
JSX
var SelectDemo = React.createClass({
render: function() {
return (
<div>
<mobiscroll.Select>
<option value="1">Berlin</option>
<option value="2">London</option>
<option value="3">New York</option>
<option value="4">Paris</option>
</mobiscroll.Select>
</div>
);
}
});
ReactDOM.render(
<SelectDemo />,
document.getElementById("content")
);View demos and other examples for the Select.
Timer
HTML
<div id="content"></div>
JSX
var TimerDemo = React.createClass({
render: function() {
return (
<div>
<mobiscroll.Timer
ref="timer"
placeholder="Please Select..."
/>
</div>
);
}
});
ReactDOM.render(
<TimerDemo />,
document.getElementById("content")
);View demos and other examples for the Timer.
Timespan
HTML
<div id="content"></div>
JSX
var TimespanDemo = React.createClass({
render: function() {
return (
<div>
<mobiscroll.Timespan
ref="timespan"
placeholder="Please Select..."
/>
</div>
);
}
});
ReactDOM.render(
<TimespanDemo />,
document.getElementById("content")
);View demos and other examples for the Timespan.
Treelist
HTML
<div id="content"></div>
JSX
var TreelistDemo = React.createClass({
render: function() {
return <div>
<mobiscroll.Treelist>
<li>America
<ul>
<li>Mexico</li>
<li>Brasil</li>
</ul>
</li>
<li>Europe
<ul>
<li>Germany</li>
<li>France</li>
<li>Italy</li>
</ul>
</li>
<li>Asia
<ul>
<li>China</li>
</ul>
</li>
</mobiscroll.Treelist>
</div>;
);
}
});
ReactDOM.render(
<TreelistDemo />,
document.getElementById("content")
);View demos and other examples for the Treelist.
Widget
HTML
<div id="content"></div>
JSX
var WidgetDemo = React.createClass({
showWidget: function() {
this.refs.myWidget.show();
},
render: function() {
return <div>
<button onClick={this.showWidget}>Show my widget</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>;
);
}
});
ReactDOM.render(
<WidgetDemo />,
document.getElementById("content")
);View demos and other examples for the Widget.
What's next?
For customization options and API settings browse the Mobiscroll for React docs.