1"use strict";(globalThis.webpackChunkmobiscroll_docs=globalThis.webpackChunkmobiscroll_docs||[]).push([[9169],{77024(e,t,n){n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>s,default:()=>m,frontMatter:()=>o,metadata:()=>r,toc:()=>l});const r=JSON.parse('{"id":"react/select/templating","title":"Templating","description":"Customize Select option rendering in Mobiscroll React \u2014 render custom HTML per option, group headers, and footer content.","source":"@site/versioned_docs/version-5.35.0/react/select/templating.md","sourceDirName":"react/select","slug":"/react/select/templating","permalink":"/docs/5.35.0/react/select/templating","draft":false,"unlisted":false,"tags":[],"version":"5.35.0","sidebarPosition":8,"frontMatter":{"sidebar_position":8,"sidebar_label":"Templating","displayed_sidebar":"reactSidebar","description":"Customize Select option rendering in Mobiscroll React \u2014 render custom HTML per option, group headers, and footer content."},"sidebar":"reactSidebar","previous":{"title":"Filtering","permalink":"/docs/5.35.0/react/select/filtering"},"next":{"title":"Invalid items","permalink":"/docs/5.35.0/react/select/invalid-items"}}');var i=n(74848),a=n(28453);const o={sidebar_position:8,sidebar_label:"Templating",displayed_sidebar:"reactSidebar",description:"Customize Select option rendering in Mobiscroll React \u2014 render custom HTML per option, group headers, and footer content."},s="Templating",c={},l=[];function d(e){const t={a:"a",admonition:"admonition",code:"code",h1:"h1",header:"header",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"templating",children:"Templating"})}),"\n",(0,i.jsxs)(t.p,{children:["The selectable options (items) on the Select UI can be customized using the ",(0,i.jsx)(t.a,{href:"./api#renderer-renderItem",children:(0,i.jsx)(t.code,{children:"renderItem"})})," and the ",(0,i.jsx)(t.a,{href:"./api#opt-itemHeight",children:(0,i.jsx)(t.code,{children:"itemHeight"})})," options."]}),"\n",(0,i.jsxs)(t.p,{children:["The item data is accessible through the ",(0,i.jsx)(t.code,{children:"data"})," property of the function's first parameter."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-jsx",children:"const myItemTemplate = (args) => {\n return <div>\n <div>{ args.data.text }</div>\n <div>{ args.data.value }</div>\n <div>{ args.data.yourCustomProperty }</div>\n </div>\n}\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-jsx",metastring:'title="Example for adding images to items"',children:"import { useCallback, useState } from 'react';\nimport { Select } from '@mobiscroll/react';\n\nfunction App() {\n const [countries] = useState([{\n value: 'US',\n text: 'United States of America',\n flagUrl: '//urlto/usa-flag',\n }, {\n value: 'DE',\n text: 'Germany',\n flagUrl: '//urlto/german-flag',\n }, {\n value: 'FR',\n text: 'France',\n flagUrl: '//urlto/french-flag',\n }]);\n\n const myItemTemplate = useCallback((i) => {\n return <div class=\"my-country-container\">\n <img src={i.data.flagUrl} />\n {i.data.text}\n </div>\n }, []);\n\n return <Select data={countries} renderItem={myItemTemplate} />\n}\n"})}),"\n",(0,i.jsx)(t.admonition,{type:"info",children:(0,i.jsxs)(t.p,{children:["Every item on the Select must have the same height. For styles that go beyond the default height, the ",(0,i.jsx)(t.a,{href:"./api#opt-itemHeight",children:(0,i.jsx)(t.code,{children:"itemHeight"})})," option can be used to adjust the styling."]})})]})}function m(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},28453(e,t,n){n.d(t,{R:()=>o,x:()=>s});var r=n(96540);const i={},a=r.createContext(i);function o(e){const t=r.useContext(a);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.