Build a radio group using React, styled-components, and Framer Motion

Image for post
Image for post
Photo by Christopher Rusev on Unsplash

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.

8. Animate With Framer Motion

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. …


Build a radio group using React, styled-components, and Framer Motion

Image for post
Image for post
Photo by Ash Ashley on Unsplash

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:

Image for post
Image for post
Component


Build a radio group using React, styled-components, and Framer Motion

Image for post
Image for post
Photo by Hristo Sahatchiev on Unsplash

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.

This is part of a series, here are part 2 and part 3.

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…

About

Kristiyan Serafimov

Software Developer at Storebrand! Born in Bulgaria 🇧🇬, living in Norway 🇳🇴.

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