In this short video tutorial, you'll learn how to build fully customizable radio
components like these and more. I already have the content
centered using flex-box. Let's get the heading first. Tracking tight will reduce the letter spacing.
And a simple horizontal rule. Now to our main radio component. It'll take the component as
children and the basic radio props. We have to wrap it with a label
tag since we'll be hiding the radio input. And clicking on the label
is the same as clicking on the input. We want the radio input to be hidden so that
only the component we pass it will be shown. Let's add some of these. For these radios to work in
conjunction, we'll have to group them together and share the same state.
We'll use react context for that. And create a wrapper
component, call it RadioGroup. It will just pass down the state and onChange
handler to the radios using the context provider. And access the state and
handler using the context. Now, each radio has a way to know which one of them is active or checked and
react to the onChange event. Its usage has now become very simple. We'll just have to group the
radios using the wrapper. And pass it the state and handler.
It will handle the rest. Let's show the current state below. Now, it should work. At this point, you can leave it vanilla and
only style the components you'll use with it. But I like to standardize some styling hence,
I'll directly apply those to the radio itself. Decent padding shadow and rounded corners. We'll transition the state
between checked and unchecked. If it's checked, add a subtle violet
gradient with dark violet text and shadow. Otherwise white and hover shadow gray. It's basically done, let's
build the example as promised. using flex-box, space them and
stretch them to the same width. Now the component we'll pass to
it. Center vertically in a row. An icon at the start. Heading and the details in the middle. And pricing at the end.
Now, make it into a component. Call it Plan.
It will need an icon, title, features, and pricing. Features will be an array, so join
it to a string with a dot separator. I'll quickly replace it with the component. Now, do the same for each of them. All that is left is the proceed button. Usual button stuff. Match the violet theme. And an arrow right icon. I nearly forgot the scale effect.
Just a little scaled when checked. And that is finally it. Leave a like if you learned something
and subscribe for more content like this.
