Skip to main content
All CollectionsTraining and guides
Initializing controls in React
Initializing controls in React

You'll find examples for how to initialize a controls with the Mobiscroll React API

Zsombor Deak avatar
Written by Zsombor Deak
Updated over 7 years ago

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")
);

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")
);

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")
);

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")
);

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")
);

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")
);

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')
);

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")
);

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")
);

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")
);

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")
);

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")
);

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")
);

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")
);

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")
);

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")
);

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")
);

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")
);

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")
);

What's next?

Did this answer your question?