Forem: Rickard Natt och Dag

Tab focus links in Firefox on macOS

Rickard Natt och Dag — Fri, 20 May 2022 11:19:18 +0000

I recently started using Firefox as my main development browser. While doing some minor updates to this site, I found that I couldn't tab focus to the links. Tabbing still worked fine in Chrome, so it must be something specific to Firefox.

This happens because Firefox honors macOS's system settings, and there are two ways that we can make it focus links while tabbing.

Using system preferences

In System Preferences → Keyboard, in the Shortcuts pane, check the “Use keyboard navigation to move focus between controls” at the bottom of the pane.

Using Firefox's configuration

In Firefox, type about:config in the URL bar to open Firefox's configuration editor. Click accept to move on if you receive a warning.

Search at the top for accessibility.tabfocus, and remove the value if it exists as a boolean (true/false).
Add a new value with the same name, accessibility.tabfocus, and give it an integer value of 7.

The value 7 is important. To understand what it means, we can take a look at the possible values of accessibility.tabfocus:

1 - Only focus text fields
2 - Focus all form elements, except text fields.
4 - Only focus links
(other) - Combine the values and their functionality. In our case, we want them all so 1 + 2 + 4 = 7

Redirect www to non-www in Cloudflare

Rickard Natt och Dag — Mon, 29 Nov 2021 00:00:00 +0000

While setting up a new domain in Cloudflare I found that I wasn't handling www for the domains of this site. What I wanted was to redirect any requests to www to non-www, but it turned out to be harder than I expected. Mostly because I'm not great at DNS setups and I had a hard time finding any tutorials to help me.

I finally got it working by creating an A-record and a page rule.

Create a DNS record

If you don't have an A-record, I didn't, then create a dummy A-record in your domain's DNS. Set its name to www and the IPv4 address to 192.0.2.1. Make sure that it's proxied (the orange cloud). The page rule we are going to create will run before this record is resolved so the value shouldn't matter, but the page rule won't run if we don't have this record.

Page rule

Go to page rules (Rules > Page Rules)
Create a new rule. Set the first field, "if the URL matches", to www.mydomain.com/*. The asterisk will help us match any routes in the destination URL.
Select "Forwarding URL" and "301 - Permanent Redirect"
Set the destination URL to https://mydomain.com/$1

The asterisk combined with the $1 will match and keep any routes. For example, www.mydomain.com/sub/path will redirect to mydomain.com/sub/path. If we don't include this part we would be redirected to the root, i.e. www.mydomain.com/sub/path would redirect to mydomain.com.

Save disk space by deleting unused node_modules

Rickard Natt och Dag — Sat, 13 Nov 2021 00:00:00 +0000

I quickly understood that I had forgotten to remove node_modules when I wanted to copy my projects folder to a new computer and the process was going to take multiple hours. Luckily, my dotfiles already contained a command to remove all the node_modules folders at once. This time the command saved me ~40 GB.

# Use the command at you own risk
find . -name "node_modules" -type d -prune -exec rm -rf '{}' +

There's a lot to the command, but here's an explanation of each part to demystify it.

find - A command that comes built-in with MacOS and Linux.
. - Look from this location
-name "node_modules" - Make sure the last component of the pathname matches node_modules
-type d - We are looking for a directory (d)
-prune - Stops find from descending into the folder, meaning that it won't look for node_modules inside node_modules and so on.
-exec rm -rf '{}' + - Runs the specified command, rm, with flags r (remove directory) and f (do not ask for confirmation no matter what the file permissions are). '{}' will be replaced by the pathname that's been found. + means that find will append all the file paths to a single command instead of running rm for each.

If you just want to find node_modules folders and display their disk size use the following command.

find . -name "node_modules" -type d -prune -print | xargs du -chs

There's also an npm command that you can use by running npx npkill if you don't want to mess with terminal commands.

Safely position fixed content on newer mobile devices

Rickard Natt och Dag — Fri, 21 May 2021 06:05:04 +0000

If we want to position fixed content safely on a mobile device that has a notch and/or a home bar, such as the iPhone X or iPhone 12, we need to take into account the safe area of the device. This is especially important if we have interactive elements, such as links or buttons, in the content. Luckily, there's a CSS property that can help us!

Let's say we're creating a cookie consent that contains a link.



<div class="cookie-consent">
  <p>By using this app you consent to our usage of cookies.</p>
  <a href="#">I understand</a>
</div>



.cookie-consent {
  background-color: #fff;
  bottom: 0px;
  left: 0px;
  padding: 20px;
  position: fixed;
  right: 0px;
}

If we don't add any specific spacing the link would fall below the safe area and it wouldn't be clickable.

The user hasn't scrolled, link is clickable.

Scrolled, link is below safe area and not clickable.

The padding needed to move the content above the safe area can vary between devices, but here's where the magic CSS property comes to the rescue. We just need one line to fix this on every device:



.cookie-consent {
  /* Previous content... */
  padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
}

The user hasn't scrolled, link is clickable.

Scrolled, link is above safe area and is clickable.

There's also safe-area-inset-top, safe-area-inset-right, and safe-area-inset-left if you have content that needs to be adjusted for other directions

This uses environment variables, safe-area-inset-bottom in this case, that are provided in the browser and adds that to the padding we already had.

The browser support for this is very good and it should be supported on all devices that require the adjustment.

How I add Tailwind to my ReScript projects

Rickard Natt och Dag — Thu, 29 Apr 2021 05:56:57 +0000

I've been using Tailwind CSS for a couple of years and I think it's the fastest and most convenient way of styling an app. Since I'm also very fond of ReScript I naturally want to combine the two. Luckily, adding Tailwind to a ReScript project isn't any harder than in a JavaScript app.

I've included some tools and templates in the end if you want to look at complete code or get set up quickly.

This assumes that you have an existing ReScript project where you want to add Tailwind. Start by adding the necessary dependencies, if you are using vite you won't need postcss.

npm install --dev tailwindcss postcss autoprefixer

We are now ready to run npx tailwindcss init -p, this will create two files for us:

tailwind.config.js - A default Tailwind configuration
postcss.config.js - A PostCSS configuration with Tailwind and Autoprefixer

To add all of Tailwind's features we create a CSS file inside the src folder with the following content.

/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

We then import this CSS file in our ReScript code, I usually put it in my entry file. If you use es6 output, you would add

// Index.res
%%raw("import './index.css'")

Or, if you use commonjs as your output

// Index.res
%%raw("require('./index.css')")

That should be it! webpack, vite, or whatever you use should pick up the CSS and compile all of Tailwind's classes.

Enable Tailwind's JIT compiler

Tailwind (> v2.1) includes a just-in-time compiler. It only generates the styles you use and will therefore be much faster. It also includes some nice new features like all variants being included by default and creating arbitrary styles.

The feature is still in preview, but I haven't had any major issues with it. To enable it, just add one line to your Tailwind configuration.

// tailwind.config.js
{
  mode: 'jit',
  ...
}

NOTE : Make sure that the purge setting has been added or no styles will be generated

Tools and templates

To make the process of integrating ReScript and Tailwind even easier, here are some tools and templates to help you.

Supreme - A CLI I've written that can quickly set up a ReScript template with Tailwind (JIT and dark mode included) and Vite. Just the way I like it.
Next.js + Tailwind - A Next.js template with Tailwind created by @ryyppy

ReScript: FFI basics in React

Rickard Natt och Dag — Tue, 09 Mar 2021 16:56:10 +0000

A foreign function interface (FFI) is a way for a program written in one language to speak with a program written in another language. In ReScript we are creating FFI bindings to JavaScript. We touched on the concept in the post about connecting to localStorage, but in this post we'll learn some of the most common bindings we encounter while developing a React app in ReScript.

React components

react-hot-toast is a small and simple package that displays beautiful notifications (toasts). Here are bindings to its <Toaster> component and toast function.

module Toaster = {
  // JavaScript equivalent
  // import { Toaster } from 'react-hot-toast'
  @react.component @module("react-hot-toast")
  external make: unit => React.element = "Toaster"

  // import ReactHotToast from 'react-hot-toast'
  @module("react-hot-toast")
  external make: t = "default"

  // ReactHotToast.success("Some string")
  @send external success: (t, string) => unit = "success"
}

// Usage in our app
@react.component
let make = () => {
  <>
    <Toaster />
    <button onClick={_ => Toaster.make->Toaster.success("Success!")} />
  </>
}

We start by adding two decorators, @react.component and @module("react-hot-toast").@react.component is the same as the one we use to annotate any React component. @module("react-hot-toast") creates a binding that imports from an external package, in this case react-hot-toast.

We are happy with the defaults of the <Toaster> so we define that the make function takes a unit, which in this case means no props, and returns a React.element. Lastly, we set "Toaster" as it is a named export.

The default export of react-hot-toast is a function that takes a string, but it also has variants for special cases such as success. Using the @senddecorator we can bind to this success function. Calling this takes two steps as we first need to create the Toaster.t parameter and then pass the text we want to display. The resulting code is in theonClick handler.

With props

Most of the times we want to be able to pass some props to the React components we bind to, so here's another example that binds to react-markdown.

module Markdown = {
  // JavaScript equivalent
  // import ReactMarkdown from 'react-markdown'
  @react.component @module("react-markdown")
  external make: (
    ~children: string,
    ~className: string=?,
  ) => React.element = "default"
}

// Usage in our app
@react.component
let make = () => {
  <Markdown>
    "# I'm an H1"
  </Markdown>
}

The difference compared to the binding without props is that the make function accepts:

children: string - The children of the component, i.e. the content, is a string which will be parsed as markdown to HTML
className: string=? - The ? denotes that the className is an optional property

Also, note that we are using "default" which imports the default export of the package.

React hooks

Binding to a React hook is like binding to any other function. Here's an example of a binding to use-dark-mode.

module DarkMode = {
  type t = {
    value: bool,
    toggle: unit => unit,
  }

  // JavaScript equivalent
  // import UseDarkMode from 'use-dark-mode'
  @module("use-dark-mode") external useDarkMode: bool => t = "default"
}

@react.component
let make = () => {
  let darkMode = DarkMode.useDarkMode(false)

  <div>
    {React.string(darkMode.value ? "Dark and sweet" : "Light and clean")}
    <button onClick={_ => darkMode.toggle()}>
      {React.string("Flip the switch")}
    </button>
  </div>
}

It's not necessary to create a module for the binding, but I think it encapsulates the binding nicer. The hook takes a bool for the initial state and returns DarkMode.t.DarkMode.t is a ReScript record but these compile to JavaScript objects without any runtime costs and are easier to work with than the alternative method using ReScript objects.

Render prop

Render props aren't very common anymore following the introduction of React hooks, but we still encounter them sometimes. Here's an example of binding to Formik.

module Formik = {
  type renderProps<'values> = {values: 'values}

  // JavaScript equivalent
  // import { Formik } from 'formik'
  @react.component @module("formik")
  external make: (
    ~children: renderProps<'values> => React.element,
    ~initialValues: 'values,
  ) => React.element = "Formik"
}

type form = {name: string}

@react.component
let make = () => {
  <Formik initialValues={{name: "React"}}>
    {({values}) => {
      <div> {React.string(values.name)} </div>
    }}
  </Formik>
}

Now it's getting more complex and it's the first time we are using a type parameter aka generic! We start by defining a React component for <Formik>. It accepts two props:

children: renderProps<'values> => React.element - The child should be a function that gets the renderProps record (with the generic'values) and returns a React.element
initialValues: 'values - A record with the initial data of the form

We define the type of the values in type form and pass a record of that type to Formik's initialValues prop. After this, the type of values in the render prop will automatically be of the type form since it uses the same type parameter as initialValues in our binding.

Note: Formik has multiple APIs for creating forms and this is not a fully functioning binding. It's just to demonstrate the use of render props.

Global variables

Sometimes we need to reach out and connect to a global variable. This is exactly what we did in the previous post about connecting to localStorage. I'll include the code example here but if you want to learn more about it see the previous post.

@val @scope("localStorage") external getItem: string => Js.Nullable.t<string> = "getItem"
@val @scope("localStorage") external setItem: (string, string) => unit = "setItem"

ReScript: Connect to localStorage using FFI and functors

Rickard Natt och Dag — Fri, 05 Mar 2021 12:35:14 +0000

While creating my snippets website I needed to store a value for how the user wants to copy the snippet. To store the value I wanted to use localStorage which is very straight-forward to bind to using ReScript's foreign function interface (FFI).

Writing these bindings is usually one of the harder parts when getting started with ReScript, but the help is getting better with both the syntax lookup and the docs.

@val @scope("localStorage") external getItem: string => Js.Nullable.t<string> = "getItem"
@val @scope("localStorage") external setItem: (string, string) => unit = "setItem"

This is all we need to do to bind to localStorage's getItem and setItemfunctions. Let's walk through the parts of one of them.

@val - Bind to a global JavaScript value
@scope("localStorage") - Set the parent scope to "localStorage"
external getItem - An external value and what we want to call it (getItem) on the ReScript end.
string => Js.Nullable.t<string> - The function takes one string, the key in localStorage, and returns a string or null.
"getItem" - Tells the compiler what the name of the function is on the JavaScript end. This works together with the scope to bind tolocalStorage.getItem

The return value of getItem isn't very easy to work with as it could potentially be any string or null. We can improve this by using a functor, like we previously used for React Context, which returns a nice custom hook that uses variants instead.

// Storage.res
module type Config = {
  type t

  let key: string
  let fromString: option<string> => t
  let toString: t => string
}

We start by creating a module type that tells us what the module that is passed in needs to contain.

t is the variant we are transforming the string to
key is a what the value should be stored as in localStorage
fromString and toString handle the conversions of the value from JavaScript land to ReScript and vice versa.

// Storage.res

// module type Config here...

module Make = (Config: Config) => {
  let useLocalStorage = () => {
    let key = Config.key
    let (state, setState) = React.useState(() => getItem(key))

    let setValue = value => {
      setItem(key, value->Config.toString)
      setState(_ => getItem(key))
    }

    (state->Js.Nullable.toOption->Config.fromString, setValue)
  }
}

We then add a Make module that accepts another module (very meta) of the Config type we created above. This returns a useLocalStorage hook that wraps the getting and setting using our configuration module.

// FruitBasket.res
module Fruit = {
  type t = Apple | Banana

  let key = "fruit"

  let fromString = value =>
    switch value {
    | Some("apple") => Apple
    | Some("banana") => Banana
    | Some(_)
    | None =>
      Apple
    }

  let toString = value =>
    switch value {
    | Apple => "apple"
    | Banana => "banana"
    }
}

module FruitStorage = Storage.Make(Fruit)

@react.component
let make = () => {
  let (fruit, setFruit) = FruitStorage.useLocalStorage()

  let toggleFruit = _ => {
    switch fruit {
    | Apple => Banana
    | Banana => Apple
    }->setFruit
  }

  <div>
    {fruit->Fruit.toString->React.string}
    <button onClick={toggleFruit}> {React.string("Toggle fruit")} </button>
  </div>
}

This is the final part where we are creating a storage setup and a component. We first create a Fruit module that implements all the parts of our Configmodule. If we miss something in our implementation of the module the compiler will complain when we try to create a Storage in the next step. Note that fromString takes care of handling any unknown strings andnull values, for those cases we always get Apple.

To get storage for our fruits we create a FruitStorage usingmodule FruitStorage = Storage.Make(Fruit). This contains our useLocalStorage hook that we can use in our component to both get the current fruit and update the stored value. Now we have a great way of persisting if we either have an apple or a banana!

If you want to see the implementation I ended up with for my snippets, which is very similar to what we've created, you can take a look at these two files in the repo, Storage.res and SnippetCode.res.

ReScript: Using useContext in rescript-react

Rickard Natt och Dag — Thu, 28 Jan 2021 14:05:33 +0000

Sometimes we might need some state in multiple places in our app and for this we can use React's Context API to share the data. For the sake of simplicity and building on previous examples, let's assume that we want to get the state from our useReducer example in two different locations.

First of all we need to create a way of sharing the state using context.

// ReactContext.res
module type Config = {
  type context
  let defaultValue: context
}

module Make = (Config: Config) => {
  let t = React.createContext(Config.defaultValue)

  module Provider = {
    let make = React.Context.provider(t)

    @obj
    external makeProps: (
      ~value: Config.context,
      ~children: React.element,
      ~key: string=?,
      unit,
    ) => {"value": Config.context, "children": React.element} = ""
  }

  let use = () => React.useContext(t)
}

This might look a bit intimidating at first but bear with me. This new file creates a nice and general way for us to create React contexts using what's called a functor.

By adding this we only need to provide a context type and a defaultValue, the values defined in the module type Config, to create a new context. Here's an example of creating a context that holds a bool value with the default being false.

include ReactContext.Make({
  type context = bool
  let defaultValue = false
})

The include keyword includes all the parts of the Make module inReactContext, which means we now have access to both a <Provider> and a use function that calls useContext.

If we combine the newly created ReactContext with our state and reducer from the useReducer example we get this code.

// ValueSettings.res
type state = DisplayValue | HideValue

type action = Toggle

module Context = {
  include ReactContext.Make({
    type context = (state, action => unit)
    let defaultValue = (HideValue, _ => ())
  })
}

module Provider = {
  @react.component
  let make = (~children) => {
    let (state, dispatch) = React.useReducer((state, action) => {
      switch action {
      | Toggle =>
        switch state {
        | DisplayValue => HideValue
        | HideValue => DisplayValue
        }
      }
    }, HideValue)

    <Context.Provider value=(state, dispatch)> children </Context.Provider>
  }
}

We've moved the state and action types as well as the useReducer. We also define a custom Provider, instead of using the one from <Context.Provider> directly, because we want to be able to update the state using our reducer's dispatch function.

Next, we need to include this provider somewhere above in the component tree from where we want to use it.

// Index.res
@react.component
let make = () => {
  <ValueSettings.Provider>
    <App />
    <AnotherPart />
  </ValueSettings.Provider>
}

Finally, we can return to our App.res from the useReducer example and modify it to get state and dispatch from the context. Since ReactContext created a use hook for us, the easiest way to fetch the state is to use ValueSettings.Context.use() which returns a tuple with the state and dispatch.

// App.res
@react.component
let make = () => {
  let (state, dispatch) = ValueSettings.Context.use()

  <div>
    {switch state {
    | DisplayValue => React.string("The best value")
    | HideValue => React.null
    }}
    <Button onClick={_ => dispatch(Toggle)}> {React.string("Toggle value")} </Button>
  </div>
}

If we only wanted to display a value in <AnotherPart> we can ignore dispatch by adding an underscore and pattern match on the state.

// AnotherPart.res
@react.component
let make = () => {
  let (state, _dispatch) = ValueSettings.Context.use()

  switch state {
  | DisplayValue => React.string("This is another great value")
  | HideValue => React.null
  }
}

This is the most complicated topic we've covered so far. If you have any questions or ways of clarifying a step feel free to reach out to me on Twitter.

ReScript: Adding new actions to an existing useReducer

Rickard Natt och Dag — Wed, 27 Jan 2021 18:04:08 +0000

Previously we updated a React component to use the useReducer hook in rescript-react. In this post, we'll add a couple of new actions to our reducer and see how the compiler helps us with adding these new features.

type action = Toggle | Display | Hide

We start by adding two new actions to the action type called Display and Hide. After we save we'll get an error in the compiler saying that we haven't covered all cases in our reducer's pattern match. It even tells us that we are missing (Display|Hide). This is exactly what we want!

Warning number 8 (configured as error)

 6 │ let make = () => {
 7 │   let (state, dispatch) = React.useReducer((state, action) => {
 8 │     switch action {
 9 │     | Toggle =>
 . │ ...
13 │       }
14 │     }
15 │   }, HideValue)
16 │

You forgot to handle a possible case here, for example:
(Display|Hide)

Let's add the new actions to our reducer.

switch action {
| Display => DisplayValue
| Hide => HideValue
| Toggle =>
  ...
}

By handling both the Display and Hide case the compiler will be happy, but we don't have anything that triggers our new actions so let's add those next.

<Button onClick={_ => dispatch(Display)}> {React.string("Display value")} </Button>
<Button onClick={_ => dispatch(Hide)}> {React.string("Hide value")} </Button>

By adding two <Button> components that trigger our new actions when clicked we've successfully added the new functionality to our useReducer. The complete updated example looks like this

type state = DisplayValue | HideValue

type action = Toggle | Display | Hide

@react.component
let make = () => {
  let (state, dispatch) = React.useReducer((state, action) => {
    switch action {
    | Display => DisplayValue
    | Hide => HideValue
    | Toggle =>
      switch state {
      | DisplayValue => HideValue
      | HideValue => DisplayValue
      }
    }
  }, HideValue)

  <div>
    {switch state {
    | DisplayValue => React.string("The best value")
    | HideValue => React.null
    }}
    <Button onClick={_ => dispatch(Toggle)}> {React.string("Toggle value")} </Button>
    <Button onClick={_ => dispatch(Display)}> {React.string("Display value")} </Button>
    <Button onClick={_ => dispatch(Hide)}> {React.string("Hide value")} </Button>
  </div>
}

ReScript: Using useReducer in rescript-react

Rickard Natt och Dag — Wed, 27 Jan 2021 11:06:22 +0000

React's useReducer is great when the states get more complex than a simple value. rescript-react useReducer is even better with ReScript's variants.

Let's update the code from our useStateimplementation step by step to use useReducer.

type state = DisplayValue | HideValue

type action = Toggle

These types define the state and actions of our reducer. Since we only want to toggle a value, we'll use a variant for the state with two possible values, DisplayValue or HideValue. We then define the actions we can dispatch to update the state. In this case, we only need one action to Toggle the state.

let (state, dispatch) = React.useReducer((state, action) => {
  switch action {
  | Toggle =>
    switch state {
    | DisplayValue => HideValue
    | HideValue => DisplayValue
    }
  }
}, HideValue)

We replace the useState hook with this useReducer hook. The reducer uses pattern matchingon the action and toggles the state depending on the current state.

The types of state and dispatch are inferred from the usage as our state type and action => unit respectively.

<div>
  {switch state {
  | DisplayValue => React.string("The best value")
  | HideValue => React.null
  }}
  <Button onClick={_ => dispatch(Toggle)}> {React.string("Toggle value")} </Button>
</div>

The updated view part uses another pattern match on the state to either display the value or display nothing. The onClick function now uses dispatch to pass the Toggle action to the reducer.

The complete code would look like this

type state = DisplayValue | HideValue

type action = Toggle

@react.component
let make = () => {
  let (state, dispatch) = React.useReducer((state, action) => {
    switch action {
    | Toggle =>
      switch state {
      | DisplayValue => HideValue
      | HideValue => DisplayValue
      }
    }
  }, HideValue)

  <div>
    {switch state {
    | DisplayValue => React.string("The best value")
    | HideValue => React.null
    }}
    <Button onClick={_ => dispatch(Toggle)}> {React.string("Toggle value")} </Button>
  </div>
}

This is a simple example that achieves the same thing as our useState component did but in a more complex manner. However, if we wanted to add a dedicated Display or Hide action the compiler would be able to help us so that we don't miss handling any cases in our implementation.

ReScript: Using useState in rescript-react

Rickard Natt och Dag — Wed, 27 Jan 2021 11:06:14 +0000

React has a useState hook that's great for keeping track of some simple state. rescript-react also has this hook, but the API is a bit different in that it only contains the function variations of useState. Here's a basic example that extends the example we created previously.

@react.component
let make = () => {
  let (displayValue, setDisplayValue) = React.useState(() => false)

  <div>
    {displayValue ? React.string("The best value") : React.null}
    <Button onClick={_ => setDisplayValue(displayValue => !displayValue)}>
      {React.string("Toggle value")}
    </Button>
  </div>
}

React.useState takes a function where the return value is our initial state. In return, we get a tuple of the current state and a setter. The types for the return values are inferred from the initial state. In this case the types are bool for displayValue and (bool => bool) => unit for setDisplayValue.

We could then use the value, defined as displayValue in our example, to conditionally display a text. Both sides of the ternary need to have the same type so we use React.null, which maps to React.element like React.stringdoes, when we don't want to display anything.

To update the value we call the setter function, defined as setDisplayValue in our example. In this case, we toggle the displayValue based on the previous value.

The bindings for useState to the React implementation acknowledges that the API isn't the best, but the only way to implement the state with type safety. The recommendation is to use useReducer whenever possible.

ReScript: Adding a third-party library

Rickard Natt och Dag — Wed, 27 Jan 2021 11:06:07 +0000

Sometimes we want to include a library that extends our code. To add a third-party library to our ReScript code we use npm as we would in a JavaScript project, but after installing we need to adjust our ReScript configuration to include the new code.

We start by installing the library using npm or yarn. For this example, I'll be using @opendevtools/rescript-telefonnummer.

npm install --save @opendevtools/rescript-telefonnummer

After the installation is complete we need to add the library name in our bsconfig.json in the bs-dependencies array.

// bsconfig.json
{
  ...
  "bs-dependencies": [
    ...,
    "@opendevtools/rescript-telefonnummer"
  ]
}

After saving, the compiler will pick up that a change has been made in the configuration and build the library. We're now ready to start using the library in our code.