{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/using-selectlist-in-react/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n \"title\": \"Using Selectlist in React\",\n \"cover\": \"/blogs/selectlist-in-react/cover.svg\",\n \"date\": \"2023-11-15\",\n \"type\": [\"tutorial\"]\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, [\"components\"]);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"p\", null, `Selectlist is an upcoming element that replaces the native select element with a fully stylable and customizable one, while still keeping all the native interactions and accessibility features. It's a sorely needed improvement and will let you do away with all your custom select implementations.`), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, `Selectlist is an experimental feature. `, mdx(\"strong\", {\n parentName: \"p\"\n }, `It's still being worked on and you can't use it in browsers yet`), `, unless you use Polypane (...or a Chromium based browser where you have experimental features turned on.)`)), mdx(\"p\", null, `This isn't a full exploration of what `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `selectlist`), ` is and can do, but a quick explainer of how to get `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `selectlist`), ` to play nicely with React. We ran into issues while replacing some of the `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `select`), ` elements in the Polypane UI, which is built with React, and we hope this prevents you from running into the same issues. For a nice introduction, check out Hidde's article `, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://hidde.blog/custom-select-with-selectlist/\"\n }), `Two levels of customising `, mdx(\"code\", _extends({\n parentName: \"a\"\n }, {\n \"className\": \"language-text\"\n }), ``)), ` and for a full explainer, head over to `, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://open-ui.org/components/selectlist/\"\n }), `OpenUI`), ` which is where the element is being developed.`), mdx(\"h2\", {\n \"id\": \"select-in-react\"\n }, `Select in React`), mdx(\"p\", null, `When you want to do something when the value in your regular select changes in th regular React way, you use the `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `onChange`), ` prop:`), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"jsx\"\n }, mdx(\"pre\", _extends({\n parentName: \"div\"\n }, {\n \"className\": \"language-jsx\"\n }), mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-jsx\"\n }), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `<`), `select`), ` `, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-name\"\n }), `onChange`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token script language-javascript\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token script-punctuation punctuation\"\n }), `=`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `{`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `(`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token parameter\"\n }), `e`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `)`), ` `, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token operator\"\n }), `=>`), ` `, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token function\"\n }), `doSomething`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `(`), `e`, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `)`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `}`)), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `>`)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `\n `), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `<`), `option`), ` `, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-name\"\n }), `value`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-value\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation attr-equals\"\n }), `=`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `\"`), `hex`, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `\"`)), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `>`)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `Hex`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), ``)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `\n `), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `<`), `option`), ` `, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-name\"\n }), `value`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-value\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation attr-equals\"\n }), `=`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `\"`), `rgb`, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `\"`)), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `>`)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `Rgb`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), ``)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `\n `), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `<`), `option`), ` `, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-name\"\n }), `value`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-value\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation attr-equals\"\n }), `=`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `\"`), `hsl`, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `\"`)), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `>`)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `HSL`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), ``)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `\n`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), ``))))), mdx(\"p\", null, `And every time a user picks a new option, the onChange is fired and you can handle whatever you need to do with the event.`), mdx(\"h2\", {\n \"id\": \"selectlist-in-react\"\n }, `Selectlist in React`), mdx(\"p\", null, `To \"migrate\" from `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `select`), ` to `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `selectlist`), `, you'd expect to be able to just swap them out:`), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"jsx\"\n }, mdx(\"pre\", _extends({\n parentName: \"div\"\n }, {\n \"className\": \"language-jsx\"\n }), mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-jsx\"\n }), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `<`), `selectlist`), ` `, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-name\"\n }), `onChange`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token script language-javascript\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token script-punctuation punctuation\"\n }), `=`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `{`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `(`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token parameter\"\n }), `e`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `)`), ` `, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token operator\"\n }), `=>`), ` `, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token function\"\n }), `doSomething`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `(`), `e`, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `)`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `}`)), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `>`)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `\n `), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `<`), `option`), ` `, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-name\"\n }), `value`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-value\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation attr-equals\"\n }), `=`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `\"`), `hex`, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `\"`)), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `>`)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `Hex`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), ``)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `\n `), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `<`), `option`), ` `, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-name\"\n }), `value`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-value\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation attr-equals\"\n }), `=`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `\"`), `rgb`, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `\"`)), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `>`)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `Rgb`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), ``)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `\n `), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `<`), `option`), ` `, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-name\"\n }), `value`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-value\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation attr-equals\"\n }), `=`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `\"`), `hsl`, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `\"`)), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `>`)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `HSL`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), ``)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `\n`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), ``))))), mdx(\"p\", null, `Unfortunately, that's not the case. When you do that you'll notice that while the `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `selectlist`), ` value updates, `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `onChange`), ` doesn't fire. That's because the onChange prop is a React concept, not a different notation for the DOM native `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `change`), ` event.`), mdx(\"p\", null, `React has specific code that calls the `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `onChange`), ` function whenever the `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `change`), ` event fires on `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `select`), ` elements, but it doesn't know about `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `selectlist`), ` yet so the `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `onChange`), ` on `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `selectlist`), ` doesn't get called.`), mdx(\"p\", null, `To make it work, we need to add the listeners ourselves using useEffect and useRef:`), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"jsx\"\n }, mdx(\"pre\", _extends({\n parentName: \"div\"\n }, {\n \"className\": \"language-jsx\"\n }), mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-jsx\"\n }), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), `import`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `{`), ` useEffect`, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `,`), ` useRef `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `}`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), `from`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token string\"\n }), `'react'`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `;`), `\n\n`, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), `const`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token function-variable function\"\n }), `OurComponent`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), `=`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `(`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `)`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), `=>`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `{`), `\n `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), `const`), ` selectlist `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), `=`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token function\"\n }), `useRef`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `(`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `)`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `;`), `\n\n `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token function\"\n }), `useEffect`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `(`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `(`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `)`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), `=>`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `{`), `\n `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), `const`), ` currentSelectlist `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), `=`), ` selectlist`, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `.`), `current`, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `;`), `\n currentSelectlist`, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `.`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token function\"\n }), `addEventListener`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `(`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token string\"\n }), `'change'`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `,`), ` doSomething`, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `)`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `;`), `\n\n `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), `return`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `(`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `)`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), `=>`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `{`), `\n currentSelectlist`, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `.`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token function\"\n }), `removeEventListener`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `(`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token string\"\n }), `'change'`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `,`), ` doSomething`, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `)`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `;`), `\n `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `}`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `;`), `\n `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `}`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `,`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `[`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `]`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `)`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `;`), `\n\n `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), `function`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token function\"\n }), `doSomething`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `(`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token parameter\"\n }), `e`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `)`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `{`), `\n `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token comment\"\n }), `// do something with the event`), `\n `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `}`), `\n\n `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), `return`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `(`), `\n `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `<`), `selectlist`), ` `, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-name\"\n }), `ref`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token script language-javascript\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token script-punctuation punctuation\"\n }), `=`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `{`), `selectlist`, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `}`)), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `>`)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `\n `), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `<`), `option`), ` `, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-name\"\n }), `value`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-value\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation attr-equals\"\n }), `=`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `\"`), `hex`, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `\"`)), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `>`)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `Hex`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), ``)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `\n `), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `<`), `option`), ` `, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-name\"\n }), `value`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-value\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation attr-equals\"\n }), `=`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `\"`), `rgb`, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `\"`)), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `>`)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `Rgb`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), ``)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `\n `), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `<`), `option`), ` `, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-name\"\n }), `value`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-value\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation attr-equals\"\n }), `=`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `\"`), `hsl`, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `\"`)), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `>`)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `HSL`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), ``)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `\n `), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), ``)), `\n `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `)`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `;`), `\n`, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `}`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `;`)))), mdx(\"p\", null, `We use a ref to get the actual DOM element of the `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `selectlist`), `, and then use `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `useEffect`), ` to add (and remove) event listeners to it manually. The listener doesn't need to change when we update the element, so we add an empty array as the dependency array of the useEffect.`), mdx(\"p\", null, `To prevent event listeners from hanging around and taking up memory after we've removed the element from the DOM, we also add a return function to the `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `useEffect`), ` to remove the event listener when the component unmounts.`), mdx(\"h2\", {\n \"id\": \"selectlist-as-a-separate-react-component\"\n }, `Selectlist as a separate React component`), mdx(\"p\", null, `You probably don't want to add that useEffect to each component you use a Selectlist in, so instead you can extract it into its own component:`), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"jsx\"\n }, mdx(\"pre\", _extends({\n parentName: \"div\"\n }, {\n \"className\": \"language-jsx\"\n }), mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-jsx\"\n }), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), `import`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `{`), ` useEffect`, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `,`), ` useRef `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `}`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), `from`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token string\"\n }), `'react'`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `;`), `\n\n`, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), `const`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token function-variable function\"\n }), `Selectlist`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), `=`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `(`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token parameter\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `{`), ` onChange`, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `,`), ` children`, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `,`), ` value `, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `}`)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `)`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), `=>`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `{`), `\n `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), `const`), ` ref `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), `=`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token function\"\n }), `useRef`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `(`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `)`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `;`), `\n\n `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token function\"\n }), `useEffect`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `(`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `(`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `)`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), `=>`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `{`), `\n `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), `const`), ` selectlist `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), `=`), ` ref`, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `.`), `current`, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `;`), `\n selectlist`, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `.`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token function\"\n }), `addEventListener`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `(`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token string\"\n }), `'change'`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `,`), ` onChange`, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `)`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `;`), `\n `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), `return`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `(`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `)`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), `=>`), ` selectlist`, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `.`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token function\"\n }), `removeEventListener`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `(`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token string\"\n }), `'change'`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `,`), ` onChange`, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `)`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `;`), `\n `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `}`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `,`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `[`), `onChange`, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `]`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `)`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `;`), `\n\n `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), `return`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `(`), `\n `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `<`), `selectlist`), ` `, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-name\"\n }), `ref`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token script language-javascript\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token script-punctuation punctuation\"\n }), `=`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `{`), `ref`, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `}`)), ` `, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-name\"\n }), `value`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token script language-javascript\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token script-punctuation punctuation\"\n }), `=`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `{`), `value`, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `}`)), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `>`)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `\n `), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `{`), `children`, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `}`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `\n `), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), ``)), `\n `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `)`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `;`), `\n`, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `}`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `;`), `\n\n`, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token comment\"\n }), `// and then use it like this:`), `\n`, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), `const`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token function-variable function\"\n }), `OurComponent`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), `=`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `(`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `)`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), `=>`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `{`), `\n `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token comment\"\n }), `// do your domain specific stuff`), `\n\n `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), `return`), ` `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `(`), `\n `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `<`), `div`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `>`)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `\n `), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `{`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token comment\"\n }), `/* your other component parts */`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `}`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `\n `), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `<`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token class-name\"\n }), `Selectlist`)), ` `, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-name\"\n }), `onChange`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token script language-javascript\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token script-punctuation punctuation\"\n }), `=`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `{`), `doSomething`, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `}`)), ` `, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-name\"\n }), `value`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token script language-javascript\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token script-punctuation punctuation\"\n }), `=`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `{`), `value`, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `}`)), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `>`)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `\n `), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `<`), `option`), ` `, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-name\"\n }), `value`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-value\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation attr-equals\"\n }), `=`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `\"`), `hex`, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `\"`)), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `>`)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `Hex`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), ``)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `\n `), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `<`), `option`), ` `, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-name\"\n }), `value`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-value\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation attr-equals\"\n }), `=`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `\"`), `rgb`, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `\"`)), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `>`)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `Rgb`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), ``)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `\n `), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `<`), `option`), ` `, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-name\"\n }), `value`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token attr-value\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation attr-equals\"\n }), `=`), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `\"`), `hsl`, mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `\"`)), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), `>`)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `HSL`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), ``)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `\n `), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), ``)), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token plain-text\"\n }), `\n `), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token tag\"\n }), mdx(\"span\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"token punctuation\"\n }), ``)), `\n `, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `)`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `;`), `\n`, mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `}`), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), `;`)))), mdx(\"p\", null, `And that's how you can use `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `selectlist`), ` in React.`), mdx(\"p\", null, `Keep in mind that `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `selectlist`), ` isn't something you can use in the wild and have work for your visitors, and that it's still in development so things might change.`), mdx(\"p\", null, `We have the luxury of determining our own browser support and we're happily using it inside Polypane to improve how our Selects work without sacrificing on accessibility or existing user expectations. If you want to play around with `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `selectlist`), ` too, `, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"/\"\n }), `try Polypane for free`), `.`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":2,"tableOfContents":{"items":[{"url":"#select-in-react","title":"Select in React"},{"url":"#selectlist-in-react","title":"Selectlist in React"},{"url":"#selectlist-as-a-separate-react-component","title":"Selectlist as a separate React component"}]},"excerpt":"Selectlist is an upcoming element that replaces the native select element with a fully stylable and customizable one, while still keeping all the native…","frontmatter":{"title":"Using Selectlist in React","cover":"/blogs/selectlist-in-react/cover.svg","date":"2023-11-15","updated":null},"fields":{"slug":"/blog/using-selectlist-in-react/","date":"2023-11-14T23:00:00.000Z","ogFileName":"using-selectlist-in-react"}}},"pageContext":{"slug":"/blog/using-selectlist-in-react/"}},"staticQueryHashes":["4164364741","425175329"]}