100 Lessons, 100 Days: Day 3

Day 3

      What's that saying about 'the best laid plans of mice and men'? No sooner had I started this project then I caught some kind version of a cold (definitely not the one making the news) which prevented me from getting anything working Friday. Come this week and my neighborhood has been suffering blackouts which also prevent any work from occurring.

      So once I was able to finely get my cursor blinking on my IDE all I could code up was a simple Sign-up page. But instead of feeling like a failure for making one of the most common features of the internet, I decided I could be satisfied with the practice of coding up yet another sign-up page. I did want to look into using React-Hook-Form, for my form management. And after exploring it I did find their implementation of controlled forms to be compelling.

Lesson:

       If Formik is your only experience with controlling forms in react, you owe it to yourself to check out react-hook-form. Using RHF's powerful useForm() hook gives you access to the main controller, error handling, submission for the form and so much more.

`import {useForm} from 'react-hook-form';

const [register,handleSubmit,errors] = useForm()
const onSubmit =  (formData)=>{     
    console.log(formdata.name)
}
<form onSubmit={handleSubmit(onSubmit)}>
    <div className='input-container'>
        <input name='name' id='name' ref={register}  
           required/>
        <label htmlFor='name'> Enter Name</label>
    </div>
</form>

By passing the register as a ref to the input that is all you need to hand control of the input over to RHF. No need for an onChange attribute or even any chunk of state to hold the data from the input.

      Once you submit the form RHF will pass any data held by any input as an object to the custom function you passed to their handleSubmit function. Coming from a history of crafting my forms by hand the handleSubmit function only is a compelling reason to switch. It even obviously gives you the option to pull any field out of the form data, of course this can be replicated using react state management but this is much simpler.

       I also want to flex my CSS muscles a little and wanted to work on a fancy little floating label for my form. If we take a step back and think about how to achieve an effect similar to

So we have a div with a label and input inside, simple enough. So lets start with the container by giving it a position:relative;. Moving to the label is where the secret sauce lies. We give it a position absolute, set its position to overlap with the actual label and then a transition for later

label{
    position:absolute;
    top:10%;
    left:15%; 
    transition: tranform 0.3s ease-out;
}

The final step (or what I like to call the secret secret sauce) is leveraging CSS valid and focus pseudo-selectors and the sibling selector (+). To achieve the effect all we really need is to transform the scale and translateY of the label and lower it's opacity.

input:valid + label,
input:focus + label {
    transform: translateY(-30%), scale(0.7);
    opacity: 0.8;
    transition: transform 0.3s ease-out, opacity 0.3s                  ease;
}

And that is all the coded needed for a little fancy effect for your Form.

      So as simple as today's project was overcoming the multiple real life challenges just reminds me the journey to mastering can only be taken one step at a time