Improving the usability of your modules – kentcdodds

Improving the usability of your modules  #reactjs

  • All you have to do is use it:import getContentForFile from ‘react-i18n’const i18n = App() { return ( div h1{i18n(‘header.title’)}/h1 /div )}So that’s how it works (again, I’m sure some of you are thinking of other libs that could do this better, but please spare me the “well actually.” I’m aware…
  • const content = JSON.parse( … more stuffexport {getContentForFile as default, init}This presents a few challenges for users of the module.
  • Turns out that react-i18n actually exposed another module react-i18n/bootstrap to customize this behavior which is great, but that doesn’t resolve the problem of stuff happening if someone were to import react-i18n first.So what I did was a wrapped all side-effects in a function I exported called init(which was similar to…
  • But it’s ok now because that’s clear const messages = JSON.parse( ) // … other other stuff}// … more stuffexport {getContentForFile as default, init}So this means that anyone using the module now must call the init function, but they’re doing that on their own terms and whenever they want it…
  • However, we’re in the process of “inner sourcing” this module (and perhaps open sourcing it eventually), so folks are going to use it who use different tools and have different use cases.So, if it’s not too much work and doesn’t add too much complexity, then try to make the solution…

NOTE: This is a cross-post from my newsletter. I publish each email two weeks after it’s sent. Subscribe to get more content like this earlier right in your inbox! 💌 This last week I worked on my…

Improving the usability of your modulesHow to make your modules more generically useful and easier to test.NOTE: This is a cross-post from my newsletter. I publish each email two weeks after it’s sent. Subscribe to get more content like this earlier right in your inbox! 💌This last week I worked on my team’s internationalization (aka i18n) solution. We call it react-i18n (if we ever open source it, we’ll need to rename it, because that’s already taken). It’s pretty neat and really small. I’m not going to talk about why we don’t use any of the myriad of other tools that do this (maybe I’ll save that for another blog post). What I want to talk about is something I did to make that module more usable.One feature of the module is that it will automatically load your server-rendered content for you. At PayPal we have another module called react-content-loader. This is an express middleware that relies on conventions used in Kraken and inserts the content for the user based on their language preferences. For example, let’s say that you have a file:// Rocksheader.subtitle=No really, it doesThen this middleware would insert this in the bottom of your page (for US users with en as their preferred language):script type=”application/json” id=”react-messages” { “pages/home”: { “header”: { “title”: “PayPal Rocks”, subtitle: “No really, it does” } } }/scriptThen react-i18n will automatically load that on the client side. All you have to do is use it:import getContentForFile from ‘react-i18n’const i18n = App() { return ( div…

Improving the usability of your modules – kentcdodds