Using Mobiscroll components as ES6 modules
Mobiscroll components are defined as ES6 modules with dependencies defined, so they can be used as such. The advantage of this is that you don't need to build your Mobiscroll package manually, you include the full source code in your application and import the necessary components in your source code. When your application is built, only the source code of the imported components (and their dependencies) will be included in the bundle.
Depending on which framework you use for your project, there are differences on how to set up the ES6 modules.
Usage in Create React App based applications
Prerequisites
To demonstrate the usage of the ES6 modules we will use the create-react-app to create an app.
The Mobiscroll source code can be downloaded from the download page, selecting the uncompressed version.
This guide assumes you have the create-react-app cli installed. If not, visit the Create React App github page on how to get started with the cli.
The following command will create the React app:
$ create-react-app my-app
After creating your app please make sure to install node-sass
to ensure that your app supports scss. (starting from version 4.7.0 the Mobiscroll stylesheets are written in SCSS). You'll find more information about how can you install the node-sass module here.
Setting up the App
After the app is createad, the js
, scss
and fonts
folders have to be extracted and copied over from the downloaded package to the src/lib/mobiscroll
folder of your app.
Make sure the existing folder structure is kept. Here's how the app structure should look after the setup:
/
|--node_modules
|--public
|--src
|--lib
|--mobiscroll
|--fonts
|--js
|--scss
|--App.js
|--App.scss
|--index.js
|--index.scss
|--package.json
*Above are shown only the files and folders that are most relevant to this guide.
For example, to use the calendar component in the App.js
, the mobiscroll
variable has to be imported to that component. Also the related component styles needed to be imported as well. The same is true for the Form and any other Mobiscroll component. Here's how to load both components:
import React from 'react';
// import Calendar and Form components
import mobiscroll from './lib/mobiscroll/js/calendar.react.jsx';
import './lib/mobiscroll/js/forms.react.jsx';
// Import themes
import './lib/mobiscroll/js/themes/material';
import './lib/mobiscroll/js/themes/material-dark';
import './lib/mobiscroll/js/themes/ios';
import './lib/mobiscroll/js/themes/ios-dark';
import './lib/mobiscroll/js/themes/auto-theme';
// Import languages
import './lib/mobiscroll/js/i18n/de';
import './lib/mobiscroll/js/i18n/es';
import './lib/mobiscroll/js/i18n/zh';
import './App.scss';
function App() {
return (
<div className="App">
<mobiscroll.Form>
<label>
Birthday
<mobiscroll.Calendar theme="auto" />
</label>
</mobiscroll.Form>
</div>
);
}
export default App;
The icons required for the package are located in the fonts folder. There's an scss variable that needs to be set to find the font, and it's called $mbsc-font-path
.
/* Set the font path first */
$mbsc-font-path: '../../fonts/';
/* Import Mobiscroll component styles for each theme */
@import './lib/mobiscroll/scss/calendar/calendar.mobiscroll';
@import './lib/mobiscroll/scss/calendar/calendar.material.scss';
@import './lib/mobiscroll/scss/calendar/calendar.ios';
@import './lib/mobiscroll/scss/forms/forms.mobiscroll';
@import './lib/mobiscroll/scss/forms/forms.ios';
@import './lib/mobiscroll/scss/forms/forms.material.scss';
At this point building and running the app, should work, and the mobiscroll components should show up using the default mobiscroll theme.
npm start
Usage in other React based applications
To demonstrate the usage of the ES6 modules we will use the following directory structure.
Copy the downloaded Mobiscroll source code to the lib/mobiscroll
folder, making sure the
existing folder structure is kept.
/
|--dist/
|--bundle.js
|--bundle.css
|--js/
|--app.jsx
|--lib/
|--mobiscroll/
|--styles/
|--style.scss
|--index.html
|--.babelrc
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mobiscroll</title>
<link href="dist/bundle.css" rel="stylesheet">
</head>
<body>
<div id="content"></div>
</body>
</html>
Loading components
All components are located in the root of the Mobiscroll source code folder.
Every component exports the main mobiscroll object as default, so import the main mobiscroll object from any of the first loaded component. Subsequent components will be attached automatically to the main object.
Themes should be loaded from the themes folder of the Mobiscroll source.
To use the auto theme feature (choosing theme automatically based on platform) make sure to
import all themes for the platforms you'd like to support, after that import the auto-theme
module.
Languages should be loaded from the i18n
folder of the Mobiscroll source.
import React from 'react';
import ReactDOM from 'react-dom';
// Import components
import mobiscroll from '../lib/mobiscroll/js/datetime.react';
import '../lib/mobiscroll/js/forms.react';
// Import themes
import '../lib/mobiscroll/js/themes/material';
import '../lib/mobiscroll/js/themes/material-dark';
import '../lib/mobiscroll/js/themes/ios';
import '../lib/mobiscroll/js/themes/ios-dark';
import '../lib/mobiscroll/js/themes/auto-theme';
// Import languages
import '../lib/mobiscroll/js/i18n/de';
import '../lib/mobiscroll/js/i18n/es';
import './/lib/mobiscroll/js/i18n/zh';
class Form extends React.Component {
render() {
return (
<mobiscroll.Form theme="auto">
<div className="mbsc-form-group-inset">
<label>
Name
<input name="username" />
</label>
<label>
Email address
<input name="email" type="email" />
</label>
<label>
Password
<input name="password" type="password" data-password-toggle="true" />
</label>
<label>
Birthday
<mobiscroll.Date theme="auto" lang="es" />
</label>
</div>
<div className="mbsc-form-group-inset">
<button className="mbsc-btn-block" type="submit">Create account</button>
</div>
</mobiscroll.Form>
);
}
}
ReactDOM.render(
<Form />,
document.getElementById('content')
);
The above code needs to be transpiled to ES5 code in order to run in the browser. There are various module bundlers out there to help you with that. Read on to see how to do this with some of the popular module bundlers (webpack, Rollup, Browserify).
Loading styles
Styles are written in Sass and are also modular.
In our styles.scss
file we import the themes for the components we're using.
/* Specify font icon path */
$mbsc-font-path: './fonts/';
/* Import required themes for each component */
@import '../lib/mobiscroll/scss/datetime/datetime.material.scss';
@import '../lib/mobiscroll/scss/forms/forms.material.scss';
@import '../lib/mobiscroll/scss/datetime/datetime.ios.scss';
@import '../lib/mobiscroll/scss/forms/forms.ios.scss';
/* Import custom themes */
@import "../mobiscroll/scss/themes/mobiscroll.scss"
@include mbsc-custom-theme('mobiscroll-red', 'mobiscroll', ('background': #f7f7f7, 'text': #454545, 'accent': #e61d2a));
Compiling the Sass styles to css might vary depending on the build system you're using for your app. If you're not using any yet, you can simply compile it from command line, assuming Sass is installed.
node-sass styles/style.scss dist/bundle.css
Some javascript module bundlers (like webpack or Rollup) support importing the styles in the javascript source code through plugins and extensions. See examples below.
Webpack
Install webpack
npm install --save-dev webpack webpack-cli
Install babel-loader
to transpile ES6 code
npm install --save-dev babel-core babel-preset-es2015 babel-preset-react babel-loader@7
In this example we're using css-loader
and sass-loader
to import the styles directly in the
javascript source, the extract-text-webpack-plugin
to bundle the styling in a separate css file,
and file-loader
for the font icon files.
npm install --save-dev style-loader css-loader sass-loader file-loader node-sass extract-text-webpack-plugin@next
Import component files, theme files and the style file in the javascript source.
import React from 'react';
import ReactDOM from 'react-dom';
// Import components
import mobiscroll from '../lib/mobiscroll/js/datetime.react';
import '../lib/mobiscroll/js/forms.react';
// Import themes
import '../lib/mobiscroll/js/themes/material';
import '../lib/mobiscroll/js/themes/ios';
import '../lib/mobiscroll/js/themes/auto-theme';
// Import styles
import './styles/style.scss';
class Form extends React.Component {
render() {
return (
<mobiscroll.Form theme="auto">
<div className="mbsc-form-group-inset">
<label>
Name
<input name="username" />
</label>
<label>
Email address
<input name="email" type="email" />
</label>
<label>
Password
<input name="password" type="password" data-password-toggle="true" />
</label>
<label>
Birthday
<mobiscroll.Date theme="auto" />
</label>
</div>
<div className="mbsc-form-group-inset">
<button className="mbsc-btn-block" type="submit">Create account</button>
</div>
</mobiscroll.Form>
);
}
}
ReactDOM.render(
<Form />,
document.getElementById('content')
);
Import component styles in the style.scss
file.
/* Specify font icon path */
$mbsc-font-path: './fonts/';
/* Import component styles */
@import '../lib/mobiscroll/scss/datetime.material.scss';
@import '../lib/mobiscroll/scss/forms.material.scss';
@import '../lib/mobiscroll/scss/datetime.ios.scss';
@import '../lib/mobiscroll/scss/forms.ios.scss';
Configuration file for webpack
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './js/app.jsx',
output: {
filename: 'bundle.js',
},
module: {
rules: [{
test: /\.jsx$/,
exclude: /node_modules/,
use: 'babel-loader'
}, {
test: /\.css$/,
use: ExtractTextPlugin.extract(['css-loader'])
}, {
test: /\.scss/,
use: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
}, {
test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
use: 'file-loader'
}]
},
plugins: [
new ExtractTextPlugin('bundle.css')
]
};
We will also need the .babelrc
configuration file in the project root.
{ "presets": [ "es2015", "react" ] }
Run webpack to create the bundles.
npx webpack
Rollup
Install Rollup
npm install --save-dev rollup rollup-plugin-commonjs rollup-plugin-node-resolve
Install rollup-plugin-babel
and babel-preset-es2015-rollup
to transpile ES2015 code.
npm install --save-dev rollup-plugin-babel rollup-plugin-replace babel-preset-es2015-rollup babel-preset-react
In this example we're using the rollup-plugin-sass
plugin to be able
to import the styling in the javascript source.
npm install --save-dev rollup-plugin-sass
Import component files, theme files and the style file in the javascript source.
import React from 'react';
import ReactDOM from 'react-dom';
// Import components
import mobiscroll from '../lib/mobiscroll/js/datetime.react';
import '../lib/mobiscroll/js/forms.react';
// Import themes
import '../lib/mobiscroll/js/themes/material';
import '../lib/mobiscroll/js/themes/ios';
import '../lib/mobiscroll/js/themes/auto-theme';
// Import styles
import './styles/style.scss';
class Form extends React.Component {
render() {
return (
<mobiscroll.Form theme="auto">
<div className="mbsc-form-group-inset">
<label>
Name
<input name="username" />
</label>
<label>
Email address
<input name="email" type="email" />
</label>
<label>
Password
<input name="password" type="password" data-password-toggle="true" />
</label>
<label>
Birthday
<mobiscroll.Date theme="auto" />
</label>
</div>
<div className="mbsc-form-group-inset">
<button className="mbsc-btn-block" type="submit">Create account</button>
</div>
</mobiscroll.Form>
);
}
}
ReactDOM.render(
<Form />,
document.getElementById('content')
);
Import component styles in the style.scss
file.
/* Specify font icon path */
$mbsc-font-path: './fonts/';
/* Import component styles */
@import '../lib/mobiscroll/scss/datetime.material.scss';
@import '../lib/mobiscroll/scss/forms.material.scss';
@import '../lib/mobiscroll/scss/datetime.ios.scss';
@import '../lib/mobiscroll/scss/forms.ios.scss';
Configuration file for Rollup
import sass from 'rollup-plugin-sass';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
import replace from 'rollup-plugin-replace';
export default {
entry: 'js/app.jsx',
dest: 'dist/bundle.js',
format: 'iife',
plugins: [
nodeResolve({
jsnext: true
}),
replace({
'process.env.NODE_ENV': JSON.stringify('production')
}),
commonjs({
include: 'node_modules/**'
}),
sass({
output: 'dist/bundle.css'
}),
babel({
exclude: 'node_modules/**'
})
]
};
We will also need the .babelrc
configuration file in the project root.
{ "presets": [ "es2015-rollup", "react" ] }
Run Rollup to create the bundles, using the -c
option to use the configuration file.
./node_modules/.bin/rollup -c
Browserify
Install Browserify
npm install --save-dev browserify
Install babelify
and babel-preset-es2015
to transpile ES2015 code.
npm install --save-dev babel-preset-es2015 babel-preset-react babelify
We will also need the .babelrc
configuration file in the project root.
{ "presets": [ "es2015", "react" ] }
Run Browserify to create the bundles
./node_module/.bin/browserify js/app.js -t babelify --outfile dist/bundle.js