React Hook Form screenshot
React Hook Form screenshot

React Hook Form is an incredibly useful package for building out simple to complex web forms. This article illustrates our team’s approach to organizing and testing nested form components, using React Hook Form’s <FormProvider /> and useFormContext() hook and then testing form components with Testing Library.

Standard React Hook Form setup

When our forms were small and being prototyped, it was reasonable to initialize React Hook Form in the standard way according to its docs.

import React from "react"; 
import { useForm } from "react-hook-form";
export default function App() {
const { register, handleSubmit, watch, errors } = useForm();
const onSubmit = data => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input name="firstName" defaultValue="Zoe" ref={register} />
<input type="submit" />
</form>
)…


When sharing web content across phone, tablet, or laptop, image previews of a website provide a valuable first impression. If you’re developing websites using static site generators in the React ecosystem, such as Gatsby or Next.js, it’s not immediately clear (or at least wasn’t to me) on how to integrate and customize preview images.

This article will show how to create preview images using the Open Graph protocol.

Maybe you’ve pasted a URL to share with a friend and it looks like this:

Open Graph image unsuccessful preview
Open Graph image unsuccessful preview

Let’s get that preview image more exciting.

Standard HTML Open Graph implementation

Using the Open Graph protocol, websites can display preview content of your choosing, including image, title, description and more. …


Recently our UI team has switched from Enzyme to Kent Dodd’s Testing Library for a much improved, simplified experience in testing JavaScript and React components.

The issue
We have a growing number of applications which rely upon React Router to to handle client-side routing, and a good number of “container” components are dependent upon a URL parameter value for making network requests.

When testing these components with Testing Library / Jest, we need a way to mock routes and route parameter values via React Router’s match object in our component tests.

Setup
In one application, the following UI interface route is structured as…

About

Adam J. Arling

Senior Front-End Developer/Manager — Northwestern University Libraries Repository and Digital Curation

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store