In part 1 and part 2 we looked at the base structure, accessibility rules, handling selected state, click and key-press events, and more. If you haven’t read them, I would suggest doing so before continuing here.
Let’s take a quick look at the point where we left part 2. You can find the code here.
You can see that I have created a
styled.tsx file where I have put all of my styled-components. I treat this file as a CSS file. Everything else has remained the same.
Framer Motion is currently, in my opinion, the best animation library for React. It serves as a successor to Pose and it was created by the same author (Matt Perry), as well as some excellent engineers at Framer. …
In Part 1, we looked at the accessibility rules for this component, coded the base structure, and handled some basic logic. In Part 2, we’ll handle the selected state, clicks, and keypresses. You can find part 3 here.
Before we continue, let’s take a quick look at where we left off in Part 1:
This piece will be concentrated on how to build a radio group, but you can still apply some of the practices shown below for other components as well.
The chosen technological stack is React, styled-components, and Framer Motion. Although Framer Motion is less popular than react-spring, it brings an excellent API to the table. It’s very easy to understand and use, packed with features, and it doesn’t invoke unnecessary re-renders.
We are going to type all of the code in TypeScript using version 3.6.3.
And here is what we are going to…