Create Field components
Our API for the
Field will have two compound components,
Field component will provide a unique ID to
Field.Input using the Context API.
To generate our unique IDs we will be creating a custom React Hook using the Nano ID library. Nano ID is a powerful utility that is able to create URL-friendly unique strings. Let's add the library as a dependency:
Next, we need to create a new file for our hook. Since this utility can be useful for future component development we will place it in the utils folder.
Our unique IDs aren't required to be cryptographically secure so we are able to use the more performant
non-secure import of Nano ID. We will also be creating a
customAlphabet implementation to create a consistent ID structure that still has enough uniqueness to avoid potential collisions.
Our hook will generate a new ID when first rendered and return that same value throughout a consuming components lifecycle.
Field Context provider#
Field component will provide the value returned by
useUniqueID through Context to its children. Create a new directory for the provider and its context:
Next, we can create a new
FieldContext export that is typed to return a
string (the unique ID) or
undefined. This allows consumers to use the
Field.Input components without a wrapper if necessary.
Field component will call the
useUniqueID hook and provide that value to
Label component is built using the same techniques that we learned in the previous module. We need to include: children pass-through, JSX prop-spreading, and the
forwardRef API. Let's create the initial component:
We are able to customize the
displayName property to ensure that any errors reference the correct component name. Now we will retrieve the unique ID from
FieldContext with the
useContext hook. This value is applied to the