a small example of i18n with Rescript-react using only built-in components.

I18n.res

let intToString = Js.Int.toString

type localeCode = En_US

let localeCodeToString = x =>
  switch x {
  | En_US => "en-US"
  }

let localeCodeFromString = x =>
  switch x {
  | "en-US" => En_US
  | _default => En_US
  }

@bs.send
external toLocaleDateString: (Js.Date.t, string) => string = "toLocaleDateString"
let toLocaleDateString = (date, locale) => date->toLocaleDateString(locale->localeCodeToString)

let useLocale = () => En_US // use context to get locale

let useMakeString = (makeString: localeCode => string) => {
  let locale = useLocale()
  makeString(locale)->React.string
}

module Common = {
  module Button = {
    module Loading = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "loading..."
          }
        useMakeString(makeString)
      }
    }
    module More = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "more"
          }
        useMakeString(makeString)
      }
    }
  }

  module Date = {
    @react.component
    let make = (~date) => {
      let makeString = locale => date->toLocaleDateString(locale)
      useMakeString(makeString)
    }
  }

  module Header = {
    module Children = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "children"
          }
        useMakeString(makeString)
      }
    }
    module CreatedBy = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "created by"
          }
        useMakeString(makeString)
      }
    }
    module CreationDate = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "created on"
          }
        useMakeString(makeString)
      }
    }
    module Description = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "description"
          }
        useMakeString(makeString)
      }
    }
    module MyProjects = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "my projects"
          }
        useMakeString(makeString)
      }
    }
    module Name = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "name"
          }
        useMakeString(makeString)
      }
    }
    module Role = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "role"
          }
        useMakeString(makeString)
      }
    }
    module Roles = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "roles"
          }
        useMakeString(makeString)
      }
    }
    let username = locale =>
      switch locale {
      | En_US => "username"
      }
    module Username = {
      @react.component
      let make = () => {
        let makeString = locale => username(locale)
        useMakeString(makeString)
      }
    }
  }
}

module Branch = {
  module BranchChildren = {
    module NoChildren = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "This branch has no children."
          }
        useMakeString(makeString)
      }
    }
    module LoadChildren = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "load children"
          }
        useMakeString(makeString)
      }
    }
  }
  module CommitCount = {
    @react.component
    let make = (~commitCount) => {
      let makeString = locale =>
        switch locale {
        | En_US =>
          `This branch has ${switch commitCount {
          | 0 => "no commits"
          | 1 => "1 commit"
          | n => `${n->intToString} commits`
          }}`
        }
      useMakeString(makeString)
    }
  }
  module JoinBranch = {
    let branchName = (kind: [#PERSONAL | #WORKGROUP], locale) =>
      switch (locale, kind) {
      | (En_US, #PERSONAL) => "personal branch name"
      | (En_US, #WORKGROUP) => "working group name"
      }

    module CreateBranch = {
      @react.component
      let make = (~kind: [#PERSONAL | #WORKGROUP]) => {
        let makeString = locale =>
          switch (locale, kind) {
          | (En_US, #PERSONAL) => "create personal branch"
          | (En_US, #WORKGROUP) => "create working group"
          }
        useMakeString(makeString)
      }
    }

    module OpenEditor = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "open editor"
          }
        useMakeString(makeString)
      }
    }
  }

  module MasterBranch = {
    module Description = {
      @react.component
      let make = (~name, ~created_at, ~updated_at, ~username) => {
        let makeString = locale =>
          switch locale {
          | En_US =>
            `The branch ${name} was created on ${created_at->toLocaleDateString(
              locale,
            )} by ${username}. Last updated on ${updated_at->toLocaleDateString(locale)}.`
          }
        useMakeString(makeString)
      }
    }

    module NoMasterBranch = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "There is no master branch in this project"
          }
        useMakeString(makeString)
      }
    }
    module Title = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "main branch"
          }
        useMakeString(makeString)
      }
    }
  }
  module Personal = {
    module Title = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "personal branch"
          }
        useMakeString(makeString)
      }
    }
  }

  module Role = {
    let makeString = (locale, ~role) =>
      switch (locale, role) {
      | (En_US, #OWNER) => "owner"
      | (En_US, #EDITOR) => "editor"
      | (En_US, other) => j`unknown role ($other)`
      }

    @react.component
    let make = (~role) => useMakeString(makeString(~role))
  }
  module WorkGroup = {
    module Title = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "workgroup"
          }
        useMakeString(makeString)
      }
    }
  }
}

module Editor = {
  module EditorPage = {
    module UnknownDoc = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "This document doesn't exist or you don't have the rights to view it."
          }
        useMakeString(makeString)
      }
    }
  }
  module Menu = {
    module AcceptAll = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "accept all"
          }
        useMakeString(makeString)
      }
    }
    module CommitTextHint = {
      let makeString = locale =>
        switch locale {
        | En_US => "explain the changes you've made"
        }
    }
    module PushChanges = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "push changes"
          }
        useMakeString(makeString)
      }
    }
    module RightSideBar = {
      module TabName = {
        @react.component
        let make = (~tab) => {
          let makeString = locale =>
            switch locale {
            | En_US => switch tab {
                | #TrackChange =>"track changes"
                | #History => "history"
              }
            }
          useMakeString(makeString)
        }
      }
    }
    module Share = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "share"
          }
        useMakeString(makeString)
      }
    }
  }
}

module Project = {
  module CreateProject = {
    let projectName = locale =>
      switch locale {
      | En_US => "project name"
      }

    module CreateNewProject = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "create new project"
          }
        useMakeString(makeString)
      }
    }
  }
  module ProjectDetails = {
    module Description = {
      @react.component
      let make = (~created_at, ~username) => {
        let makeString = locale =>
          switch locale {
          | En_US => `created on ${created_at->toLocaleDateString(locale)} by ${username}`
          }
        useMakeString(makeString)
      }
    }
  }

  module ProjectPage = {
    module UnknownProject = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "This project doesn't exist or you don't have the rights to view it."
          }
        useMakeString(makeString)
      }
    }
  }

  module ProjectRoles = {
    module RoleSummary = {
      @react.component
      let make = (~count) => {
        let makeString = locale =>
          switch locale {
          | En_US =>
            `${switch count {
            | 0 => "Nobody has"
            | 1 => "One person has"
            | _ => count->intToString
            }} persons have a role in this project`
          }
        useMakeString(makeString)
      }
    }
  }

  module ProjectTable = {
    module NoProjectsToShow = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "no projects to show"
          }
        useMakeString(makeString)
      }
    }
  }

  module Role = {
    let makeString = (locale, ~role) =>
      switch (locale, role) {
      | (En_US, #OWNER) => "owner"
      | (En_US, other) => j`unknown role ($other)`
      }

    @react.component
    let make = (~role) => useMakeString(makeString(~role))
  }
}

module User = {
  module CreateUser = {
    module CreateNewUser = {
      @react.component
      let make = () => {
        let makeString = locale =>
          switch locale {
          | En_US => "create new user"
          }
        useMakeString(makeString)
      }
    }
  }
}