Creating an Elm Native module for currency formatting

Lots of things are very nice in Elm but occasionally you find a gap. For me, currency formatting was such a gap. It’s non-trivial enough to be annoying if you need to deal with different locales and different currencies. Javascript has a perfect api for this in the form of the function. toLocaleString Elm has an undocumented feature called Native modules allowing you to call javascript functions directly. Of course this is a bad idea and can easily re-introduce all of the type chaos and runtime errors that you were trying to escape. But in a case like this it seems reasonable — why reinvent a perfectly good api? The was a little out of date and that’s why I’m writing up how it can be done in Elm 0.18. information I was able to find about how to do this Create a normal Elm module First step is to create a normal Elm module to expose your function. module Utils.CurrencyFormat exposing (format) --this is where we import the native moduleimport Native.CurrencyFormat format : String -> String -> number -> Stringformat culture currency num =letres =Native.CurrencyFormat.format culture currency numincase res ofOk str ->str Err err -> let \_ = Debug.log "CurrencyFormatError" err in toString num Create your native js file Next create a js file called /src/Native/CurrencyFormat.js. Now, once again, this is so do everything you can to make this js function bullet-proof. not safe var _user$project$Native_CurrencyFormat = (function () { var format = function(cultureCode, currency, num) { try { var result = num.toLocaleString(cultureCode, {style: 'currency', currency: currency}); return { ctor: "Ok", \_0: result }; } catch (e) { return { ctor: "Err", \_0: e.message }; } }; return { format: F3(format) }; })(); This will expose this function to Elm to be called from the module we created in step one. Notice a couple of things: toLocaleString can fail if we give it bad inputs. For this reason we wrap the call in try catch and we return the result as an Elm (Result String String) by supplying the constructor of either Ok or Err. We could choose to pass that result on to the calling code or handle it in our utility function as I have done by just logging it and returning a plain stringified number. It depends how important the error is to you. The second thing to note is that I am wrapping the returned function in a call to a mystery F3 function. I am guessing a little bit here, but I’m pretty sure this ensures that the function is appropriately curried so that partial application will work as expected on the Elm side. Configure your app to allow native modules Make the following small change to your elm-package.json file {"version": "1.0.0","summary": "","repository": " ","license": "BSD3","source-directories": ["./client/elm"], "exposed-modules": [],"dependencies": {"elm-lang/core": "5.0.0 <= v < 6.0.0","elm-lang/html": "2.0.0 StringtoCurrency =Currency.format "en" "GBP" I think that in some limited circumstances this is a good solution. But beware, this is an undocumented feature and it can change and be broken at any time so use it at your own risk. is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising & sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories