Build a Material-UI React Component Library

If you’re working in a small-ish engineering team, and you are lucky enough to not have super-opioniated designers, but unlucky enough to have to build multiple React Apps, I would highly recommend building Material-UI Component libraries.

These sets of libraries helped my team increase their development velocity 10-fold, and saved our brain cells from the endless copying + pasting every-time we brought onboard a new client.

Photo by Daniel Cheung on Unsplash

Pre-requisites

We’ve done already the heavy lifting so far:

• In Part I, we created the foundation of our React Library, a
  <HelloWorld /> component and a playground app to test our library as we go.
• In Part II, we published our library privately to the Github NPM Registry.

What we’ll build

• In this part, we’ll use Material-UI (& Formik) to create a more complex <SignIn /> component and add it our auth-component-library
• We’ll make our component fully functional, add Auth-API + Context logic, so you’ll never have to write another SignIn page ever again (hopefully).

1. Install Material-UI

• First, we will install Material-UI, Icons, Formik & Yup (optional).
• Building forms with Formik & Yup is seamless, consistent, clean, but you are free to use any other library you wish. The process to add & test them remains the same.

$ cd auth-component-library 
$ npm i @material-ui/core @material-ui/icons formik yup

• Then, we’ll move all the packages we just installed to the peerDepedencies array in our package.json and remove them from the dependencies.

auth-component-library’s package.json

When and why to use peerDependencies

2. Create <SignIn /> Component

• If you followed Part I, your auth-component-library’s folder structure should resemble this:

auth-component-library
   -- src/
       |-- components/
           |-- HelloWorld.js
       |-- index.js
   -- package.json

• Next, we’ll create a SignIn.js file in the src/components folder. For now, we’ll create a compleletely presentational <SignIn /> component.
• Our SignIn component uses Material UI + Formik to render the form, and Yup to create a validation schema.

auth-component-library’s SignIn.js

• Lastly, we’ll export our newly created component in our auth-component-library/index.js file.

3. Test <SignIn /> Component in Playground

• If you haven’t set-up a playground yet, you can follow Part I to set-it up.
• A playground allows you to easily test your components as you develop them. It can also act as a great way to create examples for your team.
• We installed Material-UI & other packages in our component-library, but we have yet to install it in our playground . To do this, we’ll just link to our Material-UI installation in our playground/package.json .

playground’s package.json

• And finally consume our <SignIn /> component in our playground/src/App.js .

• Now, just run the following command and voila!

npm run dev

We are the Champions..of the Woooooorld

4. Send Authentication request to the API

For some use-cases, a purely presentational component might be enough. But, to make this <SignIn /> component fully-functional:

• We’ll create an AuthContext in our playground app. This will be used to store a JWT token that our Auth-API will send us, once a user is successfully authenticated.

playground/src/contexts/authContext.js

• Next, we’ll just pass the context, an authUrl our <SignIn /> component in our playground/App.js.

playground/App.js with AuthContext

• We’ll finally submit the email & password entered in our<SignIn /> component to the Auth-API, and store the access-token in the AuthContext

auth-component-library’s SignIn.js sending auth request

Final Thoughts

• As I write this, Material UI has just released a v5 (very snazzy new website, I must say). While I haven’t had the chance to test it yet, if you do please let me know
• The source code can be found on Github:

GitHub - hinammehra/auth-component-library