DEV Community: Apoorva CG

There is a simple solution with CSS

Apoorva CG — Mon, 03 Jul 2023 18:35:23 +0000

Usually CSS is hard! but not this time😄, an answer from Stack Overflow saved me a lot time and unwanted code. The requirement was to show icons onHover of a list item using react.

Came across this simple and efficient CSS solution without overengineering by @arunkhot,

Feb 24 '23

There is simple solution with CSS Just add below CSS to the elements you want to show/hide on hover. By default put set CSS property

{
  display: none
}

Element would be visible on mouse hover with below CSS.

                '&:hover, &:focus-within': {
                  '.element-class':

…

Open Full Answer

Writing this appreciation post with the time saved😌

Update your GitHub profile

Apoorva CG — Tue, 22 Nov 2022 13:30:36 +0000

As the developer community is growing, developers are connecting and collaboratively contributing to open-source projects. GitHub is a place where these projects are maintained.

With this, GitHub also provides a profile README feature, where you can showcase your work, interests, contributions, and other pieces of information on the GitHub profile page. It allows you to be as creative as you want to be, fun and interactive or keep it minimal, as they say 'sometimes less is more' 🎨.

We are all familiar with the GitHub README markdown files. This file describes or helps in understanding the project. Similarly, we can have one for our profile to share a little bit of information about ourselves with the community.

GitHub profile page after adding README file

To get started,

➡️ Create a repository with your GitHub username (assuming you have a GitHub account)

Name the repository same as your GitHub username

➡️ Don't miss out to initialize a README file and make it a public repository (this file should be placed in the root folder). GitHub renders this README at the top of your profile page.

Make a public repository with a README file

➡️ Once you create this repository, you have a README.md file ready with a basic template that GitHub provides you to start with. You can now go to your GitHub profile page (https://github.com/[userName]) to see the changes. Congratulations🎉! you just created a GitHub Profile for yourself👏

You can go ahead and start editing the README.md file that you just created and add your contents to it. To format the file, make use of GitHub's Flavored Markdown or use HTML in this Markdown file. You can also add images, emojis, and GIFs, list out recent blogs, gitHub stats, links to connect, interactive UIs and many more to this file. You can preview the changes before committing. Once the commit is made, the changes reflect on your GitHub profile page.

Some useful links,
📝 Markdown syntax and formatting, quick start, basic writing

📈 Commonly used Endpoints for GitHub stats,

Use ![Github stats](https://github-readme-stats.vercel.app/api?username=[userName]&theme=gotham) to display your GitHub account overview.
Use ![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=[userName]&layout=compact) to list the most frequently used languages.

You can modify your stats with various query parameters available, check out this repo by @anuraghazra for more details on customising UI and layouts.

GitHub stats for frequency used languages

😇 To add emojis, check this emoji-cheat-sheet for all the codes available.

🏞 Find any relatable GIFs from Giphy

📸 You can add images just by dragging and dropping them, or by pasting them directly into the editor which GitHub transforms. You can also use HTML tags to display images and specify width and height to adjust.

🌓 Based on themes you can specify different images for light and dark modes with picture element and prefers-color-scheme media feature.

👩‍💻 To add social media links or to list the skills, check out this shields website. This allows customisation of badges with styles and logos of your choice.

Example, <img src="https://img.shields.io/badge/HTML5-red?style=for-the-badge&logo=html5&logoColor=white" alt="html5 Badge"/>, check the image below to see how the list looks like,

List of skills added using Shields.io

🪄 Display Followers counts and other data using Shields with social like https://img.shields.io/github/followers/[userName]?style=social

🗂 You can also add a section to list out recent blog posts from any blogging platform to this file, add interactive sections like games by writing scripts with GitHub Workflow and Actions.

💻 Need more options, check devicon for icons representing programming languages, designing, and development tools.

✨ Customize your profile with any theme of your choice or keep it simple. Check out this repo from @abhisheknaiidu - awesome-github-profile-readme

We cannot add any CSS or js with <style> or <script> tags in this Markdown README file.

I would be happy to see some helpful tips or your creative GitHub profiles in the comments below😇, here's mine. Thanks for reading!

React Hook Form with Controllers

Apoorva CG — Fri, 24 Jun 2022 02:07:51 +0000

Hi all!👋

Today here in this post we'll see how we can use Controlled components from react-hook-form( let's call it 'rhf' ) library for building forms.

rhf lets us manage form state, handle validations and errors, use controlled components and many more functionalities to our forms react form without useState() hook for handling form values. Let's go ahead and install rhf in a CRA-setup project and see how it works,

yarn add react-hook-form

npm install react-hook-form

We will be integrating material-ui, react-select libraries with rhf form, so let's install these dependencies and get started with it💫

yarn add react-select @mui/material @emotion/react @emotion/styled @material-ui/core

We will be handling errors, dependent input fields, individually reset fields, reset the entire form and finally submit the form.

Now that we have installed all the dependencies, let's see how can we implement form with rhf😎. To begin with, we will import useForm and Controller from rhf.

useForm() is a custom hook that,
↪️ takes defaultValues, mode, etc., as arguments and
↩️ returns formState, handleSubmit, watch, setFocus, clearErrors etc., as objects and functions to manage forms.

import { useForm, Controller } from "react-hook-form";

const defaultValues = {
  name: "",
  email: "abc@xyz.com",
  address: "",
  country: { value: "", label: "" },
  state: { value: "", label: "" }
};

export default function App() {
  const { handleSubmit, reset, control, watch, resetField } = useForm({
    defaultValues
  });
  return(<form></form>);
}

Controller is a wrapper component takes number of props, we will be using

👉 name, unique & required
👉 render, takes any React components.
👉 rules, helps to validate fields
👉 control, registers component to rhf

  <Controller
    name="name"
    control={control}
    rules={{ required: true }}
    render={({ field: { onChange, value }, fieldState: { error 
              } }) => {
              return (
               <>
                 <TextField
                  placeholderText="Your name goes here!"
                  type="text"
                  name="name"
                  value={value}
                  label="Name"
                  variant="outlined"
                  onChange={onChange}
                  error={error}
                  helperText={error ? "Name is required" : ""}
                 />
               </>
              );
         }}
 />

The render prop attaches events and value into the component. Provides onChange, onBlur, name, ref and value to the child component, and also a fieldState object which contains specific input state to handle input fields element.

For the same form we will continue by adding react-select,

      <Controller
        name="country"
        control={control}
        rules={{
          required: true,
          validate: {
            isCountry: (v) => {
              return v.value !== "" || "Please select country";
            }
          }
        }}
        render={({ field: { onChange, value }, fieldState: { error } }) => {
          return (
            <>
              <Typography variant="body1">Country</Typography>
              <Select
                name="country"
                isClearable
                styles={
                  error && {
                    control: (provided, state) => ({
                      ...provided,
                      borderColor: "#fb6340",
                      borderRadius: "0.25rem"
                    }),
                    valueContainer: (provided, state) => ({
                      ...provided,
                      padding: "8px 8px"
                    })
                  }
                }
                onChange={(selectedOption) => {
                  resetField("state", {
                    defaultValue: { label: "", value: "" }
                  });
                  onChange(selectedOption);
                }}
                value={{ label: value?.label, value: value?.value }}
                options={countries}
              />
              {error?.message.length ? (
                <Typography variant="body2" color="#fb6340">
                  {error.message}
                </Typography>
              ) : null}
            </>
          );
        }}
      />
      <Controller
        name="state"
        control={control}
        rules={{
          required: true,
          validate: {
            isState: (v) => {
              return v.value !== "" || "Please select state";
            }
          }
        }}
        render={({ field, fieldState: { error } }) => {
          const countryDetails = watch("country");
          return (
            <>
              <Typography variant="body1">State</Typography>
              <Select
                name="state"
                isSearchable
                options={
                  countryDetails?.value.length
                    ? states[countryDetails.value]
                    : []
                }
                placeholder="Select state here"
                {...field}
                styles={
                  error && {
                    control: (provided, state) => ({
                      ...provided,
                      borderColor: "#fb6340",
                      borderRadius: "0.25rem"
                    }),
                    valueContainer: (provided, state) => ({
                      ...provided,
                      padding: "8px 8px"
                    })
                  }
                }
              />
              {error?.message.length ? (
                <Typography variant="body2" color="#fb6340">
                  {error.message}
                </Typography>
              ) : null}
            </>
          );
        }}
      />

Here with resetField( reset individual fields ) and watch ( watch input value by passing the name of it ) APIs we can manage dependent input fields.

As you see in the above code, whenever we are changing country field we reset state field input values to default. With watch we can track the country field and update options for state field accordingly.

Form Validations

To add validations, we are using the rules prop that provides validation as - required, min, max, minLength, maxLength, pattern, validate. Any failed validations can be handled with error from the fieldState object, easy right❗️❗️

Form Submission and Reset

Now wrap these Controller Component in form element to manage form onSubmit event using handleSubmit and reset form to default values using reset functions.

  const { handleSubmit, reset, control, watch, resetField } = useForm({
    defaultValues
  });

  const onResetFormData = () => {
    reset(defaultValues);
  };

<form onSubmit={handleSubmit((data) => console.log(data))}>

So, once we click the submit button, our entered form data will show up in the console.

You can check out the whole implementation here in codesandbox

Why do we choose rhf👩‍💻?

Few notable points,
🍬 UI library integrations
🍭 Render optimisation with isolated re-rendering
🥠 Easy Form validations
🍯 Has TypeScript support
🍪 Embraces the hooks API, uncontrolled components
🍫 Minimum Bundle size

This was one way of implementing forms with react-hook-form. Let me know your thoughts on this😇.