React Select Templating Example

By default the select takes the item.text and item.value of the data array items and populates the select. Besides the basic text/value interpretation you can write custom render functions for any custom markup printed as a scrollable list.

With the help of the renderItem option you can write a function that returns the custom item markup. Any data field can be used for the template. You'll also want to make sure that the itemHeight is set accordingly.

Get started with this example

Preview in full screen

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

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

function App() {
  const myData = useMemo(
    () => [
      {
        text: 'Mercury – Act 1',
        year: '2021',
        artist: 'Imagine Dragons',
        value: '56243',
        img: 'Mercury_Act_1',
      },
      {
        text: 'Divide',
        year: '2017',
        artist: 'Ed Sheeran',
        value: '18659',
        img: 'Divide',
      },
      {
        text: 'Evolution',
        year: '2018',
        artist: 'Disturbed',
        value: '88459',
        img: 'Evolution',
      },
      {
        text: 'Future Nostalgia',
        year: '2020',
        artist: 'Dua Lipa',
        value: '65422',
        img: 'Future_Nostalgia',
      },
      {
        text: 'Blue Banisters',
        year: '2021',
        artist: 'Lana Del Rey',
        value: '67111',
        img: 'Blue_Banisters',
      },
      {
        text: 'Human',
        year: '2021',
        artist: 'OneRepublic',
        value: '60589',
        img: 'Human',
      },
      {
        text: 'Kamikaze',
        year: '2018',
        artist: 'Eminem',
        value: '42122',
        img: 'Kamikaze',
      },
      {
        text: 'Simulation Theory',
        year: '2018',
        artist: 'Muse',
        value: '80040',
        img: 'Simulation_Theory',
      },
      {
        text: 'The Nothing',
        year: '2019',
        artist: 'Korn',
        value: '46611',
        img: 'Nothing',
      },
    ],
    [],
  );

  const renderCustomItem = useCallback((item) => {
    const data = item.data;
    return (
      <div className="md-item-template">
        <img className="md-item-template-img" src={'https://img.mobiscroll.com/demos/' + data.img + '.png'} alt="Cover" />
        <div className="md-item-template-title">
          <span>{data.text}</span>
          <span className="md-item-template-year">{' (' + data.year + ')'}</span>
        </div>
        <div className="md-item-template-artist">{'by ' + data.artist}</div>
      </div>
    );
  }, []);

  return (
    <Select
      data={myData}
      display="anchored"
      inputStyle="outline"
      itemHeight={64}
      label="Albums"
      labelStyle="stacked"
      placeholder="Please select..."
      renderItem={renderCustomItem}
    />
  );
}

export default App;

import { MbscSelectItemData, Select, setOptions  } from '@mobiscroll/react';
import { FC, useCallback } from 'react';

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

const myData = [
  {
    text: 'Mercury – Act 1',
    year: '2021',
    artist: 'Imagine Dragons',
    value: '56243',
    img: 'Mercury_Act_1',
  },
  {
    text: 'Divide',
    year: '2017',
    artist: 'Ed Sheeran',
    value: '18659',
    img: 'Divide',
  },
  {
    text: 'Evolution',
    year: '2018',
    artist: 'Disturbed',
    value: '88459',
    img: 'Evolution',
  },
  {
    text: 'Future Nostalgia',
    year: '2020',
    artist: 'Dua Lipa',
    value: '65422',
    img: 'Future_Nostalgia',
  },
  {
    text: 'Blue Banisters',
    year: '2021',
    artist: 'Lana Del Rey',
    value: '67111',
    img: 'Blue_Banisters',
  },
  {
    text: 'Human',
    year: '2021',
    artist: 'OneRepublic',
    value: '60589',
    img: 'Human',
  },
  {
    text: 'Kamikaze',
    year: '2018',
    artist: 'Eminem',
    value: '42122',
    img: 'Kamikaze',
  },
  {
    text: 'Simulation Theory',
    year: '2018',
    artist: 'Muse',
    value: '80040',
    img: 'Simulation_Theory',
  },
  {
    text: 'The Nothing',
    year: '2019',
    artist: 'Korn',
    value: '46611',
    img: 'Nothing',
  },
];

const App: FC = () => {
  const renderCustomItem = useCallback((item: MbscSelectItemData) => {
    const data = item.data;
    return (
      <div className="md-item-template">
        <img className="md-item-template-img" src={'https://img.mobiscroll.com/demos/' + data.img + '.png'} alt="Cover" />
        <div className="md-item-template-title">
          <span>{data.text}</span>
          <span className="md-item-template-year">{' (' + data.year + ')'}</span>
        </div>
        <div className="md-item-template-artist">{'by ' + data.artist}</div>
      </div>
    );
  }, []);

  return (
    <Select
      data={myData}
      display="anchored"
      inputStyle="outline"
      itemHeight={64}
      label="Albums"
      labelStyle="stacked"
      placeholder="Please select..."
      renderItem={renderCustomItem}
    />
  );
};
export default App;

.md-item-template {
  padding: 10px 10px 10px 54px;
  position: relative;
  text-align: left;
  line-height: normal;
}

.md-item-template-img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 4px;
}

.md-item-template-title {
  font-weight: 600;
  font-size: 15px;
  line-height: 24px;
}

.md-item-template-artist {
  font-size: 14px;
  opacity: 0.8;
  line-height: 20px;
}

.mbsc-scroller-wheel-item-2d .md-item-template {
  transform: scale(1.05);
}