The select component takes care of rendering data in a scrollable and consumable way for the user. The date can be passed a couple of different ways:
- Inline HTML, embedded in the markup - This is good if you only have a couple of static options.
- With the
dataoption - If you want to load model data this is the way to do it. This is the way to populate the select if you want to create a custom item template. - Remote data - Load it through the
dataoption from a remote api/data source.
Demo
Data object
Pass the items to the data option if you are loading from the model or in case of item templating.
jsxconst myData = [
{ text: 'Atlanta', value: 'atl' },
{ text: 'Berlin', value: 'ber' },
{ text: 'Boston', value: 'bos' },
{ text: 'Chicago', value: 'chi' },
{ text: 'London', value: 'lon' },
{ text: 'Los Angeles', value: 'la' },
{ text: 'New York', value: 'ny' },
{ text: 'Paris', value: 'par' },
{ text: 'San Francisco', value: 'sf' }
];
<Select
data={myData}
touchUi=
Remote data
The data loaded from a remote source needs to be passed to the data option as in the previous example.
const [remoteData, setRemoteData] = React.useState([]);
React.useEffect(() => {
getJson('https://trial.mobiscroll.com/content/languages.json',
(resp) => {
setRemoteData(resp);
});
}, []);
<Select
data={setRemoteData}
touchUi=JSXTSX
import { getJson, Select, setOptions } from '@mobiscroll/react';
import { useEffect, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [remoteData, setRemoteData] = useState([]);
const myData = useMemo(
() => [
{
text: 'Atlanta',
value: 'atl',
},
{
text: 'Berlin',
value: 'ber',
},
{
text: 'Boston',
value: 'bos',
},
{
text: 'Chicago',
value: 'chi',
},
{
text: 'London',
value: 'lon',
},
{
text: 'Los Angeles',
value: 'la',
},
{
text: 'New York',
value: 'ny',
},
{
text: 'Paris',
value: 'par',
},
{
text: 'San Francisco',
value: 'sf',
},
],
[],
);
useEffect(() => {
getJson('https://trial.mobiscroll.com/content/languages.json', (resp) => {
setRemoteData(resp);
});
}, []);
return (
<div className="mbsc-grid mbsc-form-grid">
<div className="mbsc-row">
<div className="mbsc-col-sm-12 mbsc-col-md-6">
<Select data={myData} inputStyle="outline" label="Data object" labelStyle="stacked" />
</div>
<div className="mbsc-col-sm-12 mbsc-col-md-6">
<Select data={remoteData} inputStyle="outline" label="Remote data" labelStyle="stacked" />
</div>
</div>
</div>
);
}
export default App;
import { getJson, MbscSelectData, Select, setOptions } from '@mobiscroll/react';
import { FC, useEffect, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const myData = [
{
text: 'Atlanta',
value: 'atl',
},
{
text: 'Berlin',
value: 'ber',
},
{
text: 'Boston',
value: 'bos',
},
{
text: 'Chicago',
value: 'chi',
},
{
text: 'London',
value: 'lon',
},
{
text: 'Los Angeles',
value: 'la',
},
{
text: 'New York',
value: 'ny',
},
{
text: 'Paris',
value: 'par',
},
{
text: 'San Francisco',
value: 'sf',
},
];
const App: FC = () => {
const [remoteData, setRemoteData] = useState<(string | number | MbscSelectData)[]>([]);
useEffect(() => {
getJson('https://trial.mobiscroll.com/content/languages.json', (resp) => {
setRemoteData(resp);
});
}, []);
return (
<div className="mbsc-grid mbsc-form-grid">
<div className="mbsc-row">
<div className="mbsc-col-sm-12 mbsc-col-md-6">
<Select data={myData} inputStyle="outline" label="Data object" labelStyle="stacked" />
</div>
<div className="mbsc-col-sm-12 mbsc-col-md-6">
<Select data={remoteData} inputStyle="outline" label="Remote data" labelStyle="stacked" />
</div>
</div>
</div>
);
};
export default App;