Welcome to the Guide to Building a Company Component Library course.

Course Welcome

The different types of component libraries and their uses.

An Intro to Component Libraries and Design Systems

Syllabus

How to setup your environment to complete this course.

Environment setup

Introduction

Which React Components to Build? An Atomic Design Guide

Which UI Elements Should be Turned Into React Components?

Choose React Dependencies for a Maintainable Component Library

Shared components

How to Host an NPM Package in GitHub for Free

How to Add Storybook to React to Test Component Library Locally

How to Keep React Code Consistent With Prettier and ESLint

Library creation

Build a Custom React Button Component With forwardRef API

Build a Custom Design System With React Styled Components

Validate React Props With PropTypes and TypeScript

Shared component patterns

How to Design Compound Components With React Context

How to Design Custom React Field Components With useUniqueID

How to Extend Styled Component Styles With New Style Props

Advanced patterns

How to Test React Component Libraries With ts-jest

How to Build Tests For React Button Components

How to Build Accessibility Tests For React Field Components

Component testing

The Best Ways to Bundle React Modules Into Packages

Build process

Setting Up Continuous Integration for a React Component Library With GitHub Actions

Deployment and automation

This course will teach you how to create a flexible, private, enterprise-grade component library using React.

Since its introduction in 2013, React has become one of the [most used front-end frameworks](https://2019.stateofjs.com/front-end-frameworks/). Its component-based architecture and flexibility has made it the framework of choice for those needing to share code across multiple teams.

However, the same flexibility that has helped React grow in popularity also creates many challenges when creating shared assets and tooling. Some of the most commonly asked questions include:

- What components should be shared?
- How do I choose which dependencies to include in my library?
- Which component APIs and design patterns allow for the most flexibility?
- How do I document and build my components?
- How should I be testing my library?
- Where do I deploy my components for internal use?

This course will teach you how to create a flexible, private, enterprise-grade
component library using React.

The newline Guide to Building a Company Component Library

How to identify potential shared components in an existing codebase

Importance of choosing your libraries dependencies

How to create an NPM library from scratch with TypeScript and Storybook

Basic and advanced API patterns for shared components

How to build and deploy a modern NPM package to a private NPM registry

<Field>
  <Field.Label>Accessible label</Field.Label>
  <Field.Input placeholder="Placeholder content" />
</Field>

To generate our unique IDs we will be creating a custom 

 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 

 import of Nano ID. We will also be creating a 

 implementation to create a consistent ID structure that still has enough uniqueness to avoid potential collisions.

// File: src/utils/useUniqueID.ts

import { useState } from 'react';
import { customAlphabet } from 'nanoid/non-secure';

const nanoid = customAlphabet('1234567890abcdef', 10);

export const useUniqueID = (): string => {
  const [id] = useState(nanoid());

  return id;
};

Our hook will generate a new ID when first rendered and return that same value throughout a consuming components lifecycle.

 component will provide the value returned by 

 through Context to its children. Create a new directory for the provider and its context:

mkdir src/fields
touch src/fields/Field.tsx
touch src/fields/FieldContext.tsx

 components without a wrapper if necessary.

// File: src/fields/FieldContext.tsx

import { createContext } from 'react';

export const FieldContext = createContext<string | undefined>(undefined);

// File: src/fields/Field.tsx

import React from 'react';
import { useUniqueID } from '../utils/useUniqueID';
import { FieldContext } from './FieldContext';

export const Field: React.FC = ({ children }) => {
  const id = useUniqueID();

  return <FieldContext.Provider value={id}>{children}</FieldContext.Provider>;
};

 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 

 API. Let's create the initial component:

---
title: How to Design Custom React Field Components With useUniqueID
privateVideoUrl: https://fullstack.wistia.com/medias/z5n46u2w7p
code: https://gitlab.com/fullstackio/books/newline-course-apps/austin-green-building-a-company-component-library-app/-/tree/main/code/component-library?ref_type=heads
---

## Components

Our API for the `Field` will have two compound components, `Label` and `Input`.

```tsx
<Field>
  <Field.Label>Accessible label</Field.Label>
  <Field.Input placeholder="Placeholder content" />
</Field>
```

The `Field` component will provide a unique ID to `Field.Label` and `Field.Input` using the Context API.

### `useUniqueID` hook

To generate our unique IDs we will be creating a custom [React Hook](https://reactjs.org/docs/hooks-intro.html) using the [Nano ID](https://www.npmjs.com/package/nanoid) library. Nano ID is a powerful utility that is able to create URL-friendly unique strings. Let's add the library as a dependency:

```bash
npm install nanoid@^3.1.20
```

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.

```bash
touch src/utils/useUniqueID.ts
```

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.

```ts
// File: src/utils/useUniqueID.ts

import { useState } from 'react';
import { customAlphabet } from 'nanoid/non-secure';

const nanoid = customAlphabet('1234567890abcdef', 10);

export const useUniqueID = (): string => {
  const [id] = useState(nanoid());

  return id;
};
```

Our hook will generate a new ID when first rendered and return that same value throughout a consuming components lifecycle.

### `Field` Context provider

Our wrapping `Field` component will provide the value returned by `useUniqueID` through Context to its children. Create a new directory for the provider and its context:

```bash
mkdir src/fields
touch src/fields/Field.tsx
touch src/fields/FieldContext.tsx
```

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.Label` and `Field.Input` components without a wrapper if necessary.

```ts
// File: src/fields/FieldContext.tsx

import { createContext } from 'react';

export const FieldContext = createContext<string | undefined>(undefined);
```

Our `Field` component will call the `useUniqueID` hook and provide that value to `FieldContext.Provider`.

```tsx
// File: src/fields/Field.tsx

import React from 'react';
import { useUniqueID } from '../utils/useUniqueID';
import { FieldContext } from './FieldContext';

export const Field: React.FC = ({ children }) => {
  const id = useUniqueID();

  return <FieldContext.Provider value={id}>{children}</FieldContext.Provider>;
};
```

### `Field.Label`

Our `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:

```bash
touch src/fields/Label.tsx
```

```tsx
// File: src/fields/Label.tsx

import React, { useContext } from 'react';

export const Label = React.forwardRef<
  HTMLLabelElement,
  React.ComponentPropsWithoutRef<'label'>
>((props, ref) => {
  return <label ref={ref} {...props} />;
});

Austin Green

Our API for the field will have two compound components,

The field component will provide a unique ID to fill.label

To generate our unique IDs, we'll be creating a custom React hook

Nano ID is a powerful utility that is able to create

Let's start by adding it as a new dependency.

We can do that with npm install, Nano ID.

Next, we can create a new file for our hook.

And since this utility can be useful for future component development,

we're going to be placing it in the utils folder.

We create a new file named use unique ID.

And in this hook, we're going to actually be creating a custom alphabet

Since we don't need cryptographically secure strings,

it can be a lot more performant to use this import.

So let's start by calling import custom alphabet from Nano ID,

And then we're going to create a new Nano ID instance by calling

And then we can provide the unique strings that we want to see.

we can just do some numbers and then a few characters as well.

And this will create a unique string with a length of 10 characters

using these characters that we've provided.

And for this, we're going to be using a stateful variable.

And we will call Nano ID to generate that string.

So let's go and include use state from rant.

So this will create a unique ID when this hook is first initialized,

store it as a stateful value and return it for each unique render after that.

So we need to return the strict value that we want to have returned from this

which in this case would be a string returned from Nano ID.

And so this new hook will generate a new ID when it's first rendered and then

that same value throughout all the consuming components life cycles.

Next, we need to create our wrapping field component, which will provide this

from use unique ID through context to its children.

Let's create a new directory under source called fields,

where we're going to be putting all these files.

And then let's create a new field context component.

And we're going to be importing the create context utility from rant.

And then exporting our field context component by calling create context

and then providing undefined as the default value.

Even though this is valid, we want to provide some type completion for this for

So what we want to have is the preferred value of string and then undefined if

or reading context, but not within a field component.

So this will allow a user to see a string if they're within a field element

and then undefined if, for example, a field.input is used outside of the field

which is still a valid use case for the way that we're building this.

And then in here, we can create our new field component.

So let's start by calling import react from react.

And then we're going to be using the use unique ID utility that we created

And then we're also going to be importing the context that we just created.

And then here we can export a new component field, which will be a functional

And we want to render all of the children within it.

Now, this current provider, we're not providing any value to it.

So what we want to do is call our use unique ID hook to return ID.

And then provide that as a value to our context provider.

And this field component will not return any DOM elements, but it will wrap any

of its provided children with this context provider and provide that unique ID

It's going to save full context and everything should be good there.

So for the first element that we're going to do, let's create the nested label

And in these compound components, we can use the same techniques that we

So we can include children pass through, gsx prop spreading, and the for growth

API, as well as including the custom unique ID.

And then let's export a new label component.

And to start out with, let's return a native label rather than a style

And then let's include some generics to this as well. So this is going to be

And it's going to be able to receive all of the native props for a label.

And then we need to include a display name for this as well, since it is a for

And for this, we can actually name this something different than what we've