DEV Community: Caleb Lewis

Simple Router for React Apps

Caleb Lewis — Sat, 03 Sep 2022 22:33:23 +0000

Tools like React Router provide a nice framework with which to think about and implement routing in your app. But what if you have a relatively small project that doesn't need complex routing logic?

Enter: the browser's window.location object.

It provides all you need to create a simple 'routing' system for your app. Here's, for example, what the window.location object would like for this url: http://localhost:3000/books/123456?key=abcd&searchterm=cats:

So, what if we created a Route functional component that parsed the location.href and/or the location.path looking for strict matches, and otherwise returning a 404 page.

Suppose we had a small library app and wanted to show just three pages:

a home page at /
a page to view many books at /books
and a page to view an individual book's details: /books/{bookID} where bookID comes from a database (as-a-service like firebase).

Since only have a few simple requirements, we could just use window.location to do our own routing.

First we'll create an enum encapsulating the concept of having different 'pages' or routes:

Now, functions to validate the home (/) and books (/books) routes:

We return null here to represent that the given location is indeed not the one we want to render; we want to render the route that is alternatively returned.

Now for the individual book route:

This illustrates how quick and easy it can be to make a simple and powerful routing mechanism. Here, we use regex to match against the location's pathname to strictly determine whether the path is a valid one.

For variable paths and url parameters, it's simple to parse them from the url. Here's an example of getting a path parameter:

and for url parameters:

Finally, we can put these functions together inside the Router component to render the correct content:

Here, we put the validators into an array, and iterate over them until we get a match. Once the first passing validation happens, break takes us out of the iterator.

NOTE: that since we're iterating over the validation functions in an array, the order of the validations is something to pay attention to

Then we check to make sure that if window.location didn't pass any of our validations, we set the route to NOT_FOUND.

Finally, we check the route via a switch statement, and show the page we want to render!

All you need next is to put Router in your index.js file:

Follow me on Twitter!

Type Checking Styled Components

Caleb Lewis — Mon, 08 Aug 2022 22:02:35 +0000

I've just started using styled components and it took way too long to figure out how to get type checking for styled components with props:

If you're using typescript, your editor will give you this warning:

Luckily, styled components can have generics types, so we just need to create a type for the its props and pass it as a generic:

No more type errors! :)

Input Mask Algorithm

Caleb Lewis — Sun, 10 Jul 2022 20:32:22 +0000

What's an Input Mask?

An input mask is a template used to constrain a user's input. It can be used to create
nicer form experiences by formatting their input as the user types:

Algorithm

Here are the pieces of information we need:

input: the input from the user
template: the format we want the user's input to be in. (Almost, see targetChar) any character can be used to represent phone numbers, dates, etc.
targetChar: the character in template that we'll replace with the user's input as they type

To solve, we'll use a straightforward approach: iterate through the input and template strings, replacing
targetChar until one of them finishes first.

Let's create our masking function:

function mask(input, template, targetChar) {
    const output = [] // final masked result
    let templateIndex = 0 // template pointer
    let inputIndex = 0 // input pointer
}

We'll need different index pointers for input and template because their lengths and
the targetChar locations are arbitrary, so their indexes will need to be aligned manually
as we iterate through the strings.

We want to keep track of our offsets so that we can easily manipulate both offsets independently.
On a given iteration, we don't want to increment the offset if we didn't replace a character from
the mask (when mask[maskIndex] !== maskChar).

According to our approach, our stopping condition is when we've reached the end of either
input or template strings:

while(
    inputIndex <= input.length &&
    templateIndex <= template.length
) {
    // ...
}

At each iteration, we'll check whether the character at templateIndex is
targetChar to decide whether we choose to add to the input from template
or from input:

if (template[templateIndex] === targetChar) {
    output.push(input[inputIndex])
} else {
    output.push(template[templateIndex])
}

Next, we need to align the indexes.

Normally, we'd always want to go to
the next character at the end of the iteration, however we don't want to
move on if a character isn't used. A character from the template is always added to the output (input is technically part of the template)
, but the input character only gets used when a targetChar is reached.

Therefore, we'll only increment inputIndex if we find targetChar
and increment templateIndex at every iteration:

if (template[templateIndex] === targetChar) {
    output.push(input[inputIndex])
    inputIndex++ // increment input
} else {
    output.push(template[templateIndex])
}

templateIndex++ // increment template

Finally, we return the output as a string:

return masked.join('')

When using a mask, it's often beneficial to use two inputs:

a visible one using the masked value to show to the user
an invisible one that holds the raw value that the user never sees

The raw value can be retrieved by removing any character that isn't targetChar
from the template:

// targetChar: '#', template: '###-###-####'
const rawInput = maskedInput.replaceAll('-', '')

Here's the whole function:

function mask(input, template, targetChar) { 
    input = input.replaceAll('-', '')

    const output = []
    let templateIndex = 0
    let inputIndex = 0

    while(inputIndex <= input.length && templateIndex <= template.length) {
        if (template[templateIndex] === targetChar) {
            output.push(input[inputIndex])
            inputIndex += 1
        } else {
            output.push(template[templateIndex])
        }

        templateIndex += 1
    }

    return masked.join('')
}

Closing thoughts

It's fun to think about how extensible this can be; there can be a polymorphic overload
that accepts a function as a template to provide dynamic masks, or this would even be
great as a sort of input middleware such that it's just one transformation in a set of
other operations since it's atomic.

I ran into this problem while working on a bigger article on implementing phone login with Firebase and
thought I'd share this fun little exercise. Stay tuned for the other article!

Follow me on Twitter

bonus: first person to prove they shipped this copy+pasted code gets $5 👀