Using Mobiscroll with the Source Code
The following guide will help in using the development packages (a.k.a. source code) of Mobiscroll.
You can find more details on licenses on the pricing page.
The source code can be downloaded from the download page. If you have access to the development packages, a dropdown will be there with the compression level label. Select the development level if it's not selected already from the dropdown. After selecting the components, themes, languages and icon packs you want to include hit the download button. You will get a zip file with the source code in it.
The source code of Mobiscroll is written in TypeScript and SASS, but a compiled JavaScript and Css version is also supplied with the packages built on our download page.
Package contents
The package comes with two folders: src and dist. The full source code of the selected components can be found under the src folder.
The contents of the dist folder is a ready to use bundle, with all the components from the package, that is compiled but still unminified.
For javascript projects that don't use TypeScript, the compiled bundle is recommended. Since it is not minified, the source can be modified in the bundle file directly.
Using the source
{
"compilerOptions": {
"strict": false,
...
/** @jsx createElement */ comment needs to be removed from the top of all *.tsx
files for the project to build without error. Check out the official react blog post
to learn more about this change.
When you want to use the actual source code in your project, you will need to copy over the contents of the src folder to your project. There is a src/react/bundle-esm.ts
barrel file that imports and exports everything relevant from the source. You can use this file to import components and types or you can import each component from their respective file under
src/react/components/{component}.
When importing the components from their own files, the base theme files need to be loaded as well. The base themes and custom themes need to be loaded only once in the project.
import './my-mobiscroll-dir/core/icons.scss';
import './my-mobiscroll-dir/core/themes';
import './my-mobiscroll-dir/core/custom-themes.scss';
import { Datepicker } from './my-mobiscroll-dir/react/components/datepicker';
function Example() {
return <Datepicker />
}
For the above example to work, you will need to be able to import SASS files into your project. In case of a create-react-app project, the sass library needs to be installed, with the following command:
$ npm install sass --save-dev