rohan-currency-flag-selector
Version:
Small React currency selector with country flags
1 lines • 6.18 kB
Source Map (JSON)
{"version":3,"sources":["../src/CurrencySelector.tsx","../src/currencyData.ts"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\r\nimport ReactCountryFlag from \"react-country-flag\"\r\nimport { currencyMap } from \"./currencyData\"\r\n\r\nexport interface CurrencySelectorProps {\r\n /**\r\n * initial country code like 'US', 'IN'\r\n */\r\n initial?: keyof typeof currencyMap\r\n /**\r\n * callback when user selects a currency\r\n */\r\n onSelect?: (code: string) => void\r\n /**\r\n * whether to persist selection to localStorage\r\n */\r\n persist?: boolean\r\n /**\r\n * custom className for the trigger button\r\n */\r\n className?: string\r\n}\r\n\r\nexport function CurrencySelector({\r\n initial = \"US\",\r\n onSelect,\r\n persist = true,\r\n className,\r\n}: CurrencySelectorProps) {\r\n const [selected, setSelected] = useState<keyof typeof currencyMap>(initial)\r\n const current = currencyMap[selected]\r\n\r\n useEffect(() => {\r\n if (!persist) return\r\n const saved = typeof window !== \"undefined\" ? localStorage.getItem(\"rcfs-selected\") : null\r\n if (saved && (saved in currencyMap)) {\r\n setSelected(saved as keyof typeof currencyMap)\r\n }\r\n }, [persist])\r\n\r\n const handleSelect = (code: keyof typeof currencyMap) => {\r\n setSelected(code)\r\n onSelect?.(code)\r\n if (persist && typeof window !== \"undefined\") {\r\n localStorage.setItem(\"rcfs-selected\", code)\r\n }\r\n }\r\n\r\n return (\r\n <div className=\"rcfs-root\" style={{ position: \"relative\", display: \"inline-block\" }}>\r\n <button className={className || \"rcfs-trigger\"} aria-haspopup=\"menu\" aria-expanded=\"false\">\r\n <span style={{ display: \"inline-flex\", alignItems: \"center\", gap: 8 }}>\r\n <ReactCountryFlag countryCode={selected} svg style={{ width: \"1.25em\", height: \"1.25em\" }} />\r\n <span style={{ fontWeight: 600 }}>{current.symbol}</span>\r\n </span>\r\n </button>\r\n\r\n <div className=\"rcfs-menu\" role=\"menu\" style={{\r\n position: \"absolute\",\r\n marginTop: 6,\r\n right: 0,\r\n background: \"white\",\r\n border: \"1px solid rgba(0,0,0,0.08)\",\r\n borderRadius: 6,\r\n boxShadow: \"0 6px 18px rgba(0,0,0,0.06)\",\r\n zIndex: 50,\r\n minWidth: 220,\r\n overflow: \"hidden\"\r\n }}>\r\n {Object.entries(currencyMap).map(([code, data]) => (\r\n <div\r\n key={code}\r\n role=\"menuitem\"\r\n onClick={() => handleSelect(code as keyof typeof currencyMap)}\r\n style={{ padding: \"10px 12px\", cursor: \"pointer\", display: \"flex\", gap: 10, alignItems: \"center\" }}\r\n >\r\n <ReactCountryFlag countryCode={code} svg style={{ width: \"1.25em\", height: \"1.25em\" }} />\r\n <div style={{ display: \"flex\", flexDirection: \"column\" }}>\r\n <span style={{ fontWeight: 600 }}>{data.symbol} — {data.currency}</span>\r\n <small style={{ color: \"#6b7280\" }}>{data.country}</small>\r\n </div>\r\n </div>\r\n ))}\r\n </div>\r\n </div>\r\n )\r\n}\r\n\r\nexport default CurrencySelector\r\n","export const currencyMap: Record<string, { symbol: string; currency: string; country: string }> = {\r\n US: { symbol: \"$\", currency: \"USD\", country: \"United States\" },\r\n IN: { symbol: \"₹\", currency: \"INR\", country: \"India\" },\r\n JP: { symbol: \"¥\", currency: \"JPY\", country: \"Japan\" },\r\n GB: { symbol: \"£\", currency: \"GBP\", country: \"United Kingdom\" },\r\n EU: { symbol: \"€\", currency: \"EUR\", country: \"European Union\" },\r\n CA: { symbol: \"$\", currency: \"CAD\", country: \"Canada\" },\r\n AU: { symbol: \"$\", currency: \"AUD\", country: \"Australia\" },\r\n CN: { symbol: \"¥\", currency: \"CNY\", country: \"China\" }\r\n}\r\n"],"mappings":"AAAA,OAAgB,aAAAA,EAAW,YAAAC,MAAgB,QAC3C,OAAOC,MAAsB,qBCDtB,IAAMC,EAAqF,CAChG,GAAI,CAAE,OAAQ,IAAK,SAAU,MAAO,QAAS,eAAgB,EAC7D,GAAI,CAAE,OAAQ,SAAK,SAAU,MAAO,QAAS,OAAQ,EACrD,GAAI,CAAE,OAAQ,OAAK,SAAU,MAAO,QAAS,OAAQ,EACrD,GAAI,CAAE,OAAQ,OAAK,SAAU,MAAO,QAAS,gBAAiB,EAC9D,GAAI,CAAE,OAAQ,SAAK,SAAU,MAAO,QAAS,gBAAiB,EAC9D,GAAI,CAAE,OAAQ,IAAK,SAAU,MAAO,QAAS,QAAS,EACtD,GAAI,CAAE,OAAQ,IAAK,SAAU,MAAO,QAAS,WAAY,EACzD,GAAI,CAAE,OAAQ,OAAK,SAAU,MAAO,QAAS,OAAQ,CACvD,ED0CQ,OACE,OAAAC,EADF,QAAAC,MAAA,oBA5BD,SAASC,EAAiB,CAC/B,QAAAC,EAAU,KACV,SAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,CACF,EAA0B,CACxB,GAAM,CAACC,EAAUC,CAAW,EAAIC,EAAmCN,CAAO,EACpEO,EAAUC,EAAYJ,CAAQ,EAEpCK,EAAU,IAAM,CACd,GAAI,CAACP,EAAS,OACd,IAAMQ,EAAQ,OAAO,OAAW,IAAc,aAAa,QAAQ,eAAe,EAAI,KAClFA,GAAUA,KAASF,GACrBH,EAAYK,CAAiC,CAEjD,EAAG,CAACR,CAAO,CAAC,EAEZ,IAAMS,EAAgBC,GAAmC,CACvDP,EAAYO,CAAI,EAChBX,IAAWW,CAAI,EACXV,GAAW,OAAO,OAAW,KAC/B,aAAa,QAAQ,gBAAiBU,CAAI,CAE9C,EAEA,OACEd,EAAC,OAAI,UAAU,YAAY,MAAO,CAAE,SAAU,WAAY,QAAS,cAAe,EAChF,UAAAD,EAAC,UAAO,UAAWM,GAAa,eAAgB,gBAAc,OAAO,gBAAc,QACjF,SAAAL,EAAC,QAAK,MAAO,CAAE,QAAS,cAAe,WAAY,SAAU,IAAK,CAAE,EAClE,UAAAD,EAACgB,EAAA,CAAiB,YAAaT,EAAU,IAAG,GAAC,MAAO,CAAE,MAAO,SAAU,OAAQ,QAAS,EAAG,EAC3FP,EAAC,QAAK,MAAO,CAAE,WAAY,GAAI,EAAI,SAAAU,EAAQ,OAAO,GACpD,EACF,EAEAV,EAAC,OAAI,UAAU,YAAY,KAAK,OAAO,MAAO,CAC5C,SAAU,WACV,UAAW,EACX,MAAO,EACP,WAAY,QACZ,OAAQ,6BACR,aAAc,EACd,UAAW,8BACX,OAAQ,GACR,SAAU,IACV,SAAU,QACZ,EACG,gBAAO,QAAQW,CAAW,EAAE,IAAI,CAAC,CAACI,EAAME,CAAI,IAC3ChB,EAAC,OAEC,KAAK,WACL,QAAS,IAAMa,EAAaC,CAAgC,EAC5D,MAAO,CAAE,QAAS,YAAa,OAAQ,UAAW,QAAS,OAAQ,IAAK,GAAI,WAAY,QAAS,EAEjG,UAAAf,EAACgB,EAAA,CAAiB,YAAaD,EAAM,IAAG,GAAC,MAAO,CAAE,MAAO,SAAU,OAAQ,QAAS,EAAG,EACvFd,EAAC,OAAI,MAAO,CAAE,QAAS,OAAQ,cAAe,QAAS,EACrD,UAAAA,EAAC,QAAK,MAAO,CAAE,WAAY,GAAI,EAAI,UAAAgB,EAAK,OAAO,WAAIA,EAAK,UAAS,EACjEjB,EAAC,SAAM,MAAO,CAAE,MAAO,SAAU,EAAI,SAAAiB,EAAK,QAAQ,GACpD,IATKF,CAUP,CACD,EACH,GACF,CAEJ,CAEA,IAAOG,EAAQhB","names":["useEffect","useState","ReactCountryFlag","currencyMap","jsx","jsxs","CurrencySelector","initial","onSelect","persist","className","selected","setSelected","useState","current","currencyMap","useEffect","saved","handleSelect","code","ReactCountryFlag","data","CurrencySelector_default"]}