Templating

The selectable options (items) on the Select UI can be customized using the renderItem and the itemHeight options.

The item data is accessible through the data property of the function's first parameter.

const myItemTemplate = (args) => {
  return <div>
    <div>{ args.data.text }</div>
    <div>{ args.data.value }</div>
    <div>{ args.data.yourCustomProperty }</div>
  </div>
}

Example for adding images to items

import { useCallback, useState } from 'react';
import { Select }  from '@mobiscroll/react';

function App() {
  const [countries] = useState([{
        value: 'US',
        text: 'United States of America',
        flagUrl: '//urlto/usa-flag',
    }, {
        value: 'DE',
        text: 'Germany',
        flagUrl: '//urlto/german-flag',
    }, {
        value: 'FR',
        text: 'France',
        flagUrl: '//urlto/french-flag',
    }]);

  const myItemTemplate = useCallback((i) => {
    return <div class="my-country-container">
        <img src={i.data.flagUrl} />
        {i.data.text}
      </div>
  }, []);

  return <Select data={countries} renderItem={myItemTemplate} />
}

info

Every item on the Select must have the same height. For styles that go beyond the default height, the itemHeight option can be used to adjust the styling.