Member-only story
We’re going to build a selector that looks like this in React.
The selector allows user to make single choice out of multiple options. The chosen option will have a light white background color and there’s a nice animation as user selecting different options.
Before we start coding, here’s a basic concept that I used to code this button.
First we have make a simple div with dark background as our base div. Then we’ll put our options in another div or button. And finally, we put another div with light background underneath the options and above the base div. When user click on the option, we will change the position of the div to animate.
Now let’s start coding. First, let’s create our base div with dark background.
Next, we’ll put options in to the base div. Since we’re designing a reusable element, let’s pass the options in as props. Each option should have a title, and onClick event handler to run some logic when the option is selected. We also want to pass in a default index to the selector.
