DEV Community: Nabaraj saha

React custom hooks to update form data

Nabaraj saha — Fri, 26 Feb 2021 18:06:04 +0000

I tried to search an image which can show the purpose of react custom hooks. I found this after searching sometimes. It looks like to me sharing same resource which is the purpose of react custom hooks. Official custom hooks page can be found here to get more clarity of defination and purpose. Custom hooks maintain separate state and effects inside the component fully isolated.

Assuming you are familiar with React Hooks such as useState, useEffect, useContext, etc. What I am trying to show here is a basic custom hooks to update form fields values. In an application we may have multiple forms and we may need to maintain a state object to store the values of form fields(Make sense if we are not using any third party form library). Initially I was writing separate logics for each form to update. This update can be initialize with default/prepopulated values or update on change of each fields.

What I was doing before custom hooks as below.

Some basic login form



import { useState } from 'react';

export default function Loginpage() {

  const [formData, setFormData] = useState({ email: '', password: '' });

  function changeField(e){
    let name = e.target.name;
    let value = e.target.value;
    let formObject = { ...formData };
    setFormData({ ...formObject, [name]: value });
  }
  return (
    <div className="container" style={{ maxWidth: "480px" }}>
      <div className="card shadow mt-5">
        <div className="card-body">
          <form className="form-horizontal" onSubmit={checkLogin}>
            <fieldset>
              <legend>Login Form</legend>
              <div className="form-group">
                <label className="control-label" htmlFor="textinput">Email</label>
                <div className="">
                  <input id="email" onChange={changeField} name="email" type="text" placeholder="Enter your email" className="form-control input-md" required="" />
                </div>
              </div>
              <div className="form-group">
                <label className="control-label" htmlFor="passwordinput">Password</label>
                <div className="">
                  <input id="password" onChange={changeField} name="password" type="password" placeholder="Enter your password" className="form-control input-md" required="" />

                </div>
              </div>
              <button type="submit" className="btn btn-info btn-block" disabled={!formData.email || !formData.password}>Submit</button>
            </fieldset>
          </form>

        </div>
      </div>
    </div>
  )
}

I have removed the checkLogin method as this is out of the scope of this topic.

Same coding logic of updating formData will be there for other form as well. So I make the custom hooks as below code.

useUpdateForm hook



import { useState } from 'react';

function useUpdateForm(initValue = {}) {
  const [formData, setFormData] = useState(initValue);

  const changeField = (e) => {
    let formObject = { ...formData };
    setFormData({ ...formObject, [e.target.name]: e.target.value });
  }

  const resetForm = (initialValue) => {
    let formObject = { ...formData };
    setFormData({ ...formObject, ...initialValue });
  }

  return [formData, changeField, resetForm];

}

export default useUpdateForm;

I have added one more method to reset the Form data. It was useful if we want to reset the form any point of time.

Now how my component looks like



import { useState } from 'react';
import useUpdateForm from "./../utils/submitFormHook";
export default function Loginpage() {

  const [formData, changeField] = useUpdateForm({ email: '', password: '' });


  return (
    <div className="container" style={{ maxWidth: "480px" }}>
      <div className="card shadow mt-5">
        <div className="card-body">
          <form className="form-horizontal" onSubmit={checkLogin}>
            <fieldset>
              <legend>Login Form</legend>
              <div className="form-group">
                <label className="control-label" htmlFor="textinput">Email</label>
                <div className="">
                  <input id="email" onChange={changeField} name="email" type="text" placeholder="Enter your email" className="form-control input-md" required="" />
                </div>
              </div>
              <div className="form-group">
                <label className="control-label" htmlFor="passwordinput">Password</label>
                <div className="">
                  <input id="password" onChange={changeField} name="password" type="password" placeholder="Enter your password" className="form-control input-md" required="" />

                </div>
              </div>
              <button type="submit" className="btn btn-info btn-block" disabled={!formData.email || !formData.password}>Submit</button>
            </fieldset>
          </form>

        </div>
      </div>
    </div>
  )
}

Some extra line of code is got removed and this became common logic for other forms as well.

Area of improvement
This is a very basic example for react custom hooks. Always there will be chance of improvement. Maybe we can add validation logic in this.

Build React Carousel - Part3

Nabaraj saha — Mon, 12 Aug 2019 12:57:59 +0000

This is the last and final part of this series

Will explain how to implement the animation and timer. For reference I am adding the final coding part again.

We are using state which is one of the key concept of React. It is basically an object of this file, which holds various key-value pairs. It is initialized in constructor by statement like this.state = { };

But when we need to change it, we can do only by statement like this.setState({ });

In React whenever the state is changed the some of the component life cycle methods will get call like componentDidMount and render method

Now let go through the flow to understand how state and props works. We are using ES6 constructor, which will run first when the "Carousel" is called first from App . Inside constructor, we are setting our initial state object by
this.state = { transform: 0, currentSlide: 0, totalSlide: 0, autoScrollTimer: this.props.autoScrollTimer || 5000, showLeftArrow: false, showRightArrow: true };

this.carouselTimer = "";

which set a key-value pair. I also initialised one variable to store the timer so that it will be available through the component and we can clear the timer when is required.

There are some methods or handler I am using

clearTimer =clear the timer on mouse enter startTimer = start the carousel animation showArrow = to control the display arrow slideLeft = animate slider to left slideRight = animate slider to right startCarousel = start the timer after pause arrowMaker = return arrow element

After the constructor is run, some react life cycle methods will run like componentDidMount and render(). Inside componentDidMount the code is

let carousel = this.carousel.getBoundingClientRect(); let containerWidth = carousel.width; let carouselWidth = this.props.sliderType === "fullScreen" ? containerWidth * this.props.children.length : this.carouselInnerContent.getBoundingClientRect().width; let totalSlide = Math.ceil(carouselWidth / containerWidth); this.setState( { totalSlide }, () => { this.startTimer(); } );

we are taking carousel width and carouselInnerContent width as we are using grid carousel the slide count is depend on totalSlide = Math.ceil(carouselWidth / containerWidth);

and we are storing totalSlide in the state. After doing setState I passed start timer as a callback. As setState is an asynchronous call sometimes the updates state may not reflect in next line.

inside startTimer will check if autoScroll true is passed or not and based on that will run setInterval

if (vm.props.autoScroll) { this.carouselTimer = setInterval(() => {

and the time duration will be vm.state.autoScrollTimer as declared before.

Again will check the totalSlide inside setInterval. It is good to check in every interval so that if we resize the browser window it will reset the width and total slide as well and no need to add any observer.

I am maintaining another state that is transform it will add the css translateX value each interval or each time we click on arrow. For more information about translateX check here.

I am checking if currentSlide * containerWidth + containerWidth > carouselWidth then will not slide full only remaining length.

Also after a successful updating of transform, totalSlide and currentSlide(which is holding the present slide) will call the showArrow method in callback so that it will hide and show arrow.

showArrow = currentSlide => { if (currentSlide === 0) { this.setState({ showLeftArrow: false }); } else { this.setState({ showLeftArrow: true }); } if (currentSlide === this.state.totalSlide - 1) { this.setState({ showRightArrow: false }); } else { this.setState({ showRightArrow: true }); } };

showArrow is simple only checking currentSlide and hide and show arrow.

the slideLeft and slideRight method also almost same like startTimer only controlling the direction based on right and left and update the transform state.

That's all the functionality of carousel. Hope it will help to understand the code.

Thanks for go through this article. I have created a node package for the same So that directly we can use that. Please check here

Build React Carousel -Part2

Nabaraj saha — Mon, 12 Aug 2019 12:53:03 +0000

This part I will show adding css to get the structure.

As we can see slides inside carousel-inner-container will come inline and will change the left and right position. the outer container carousel will maintain the width of the visible area and overflow content will not be visible.

full css is here

Build ReactJS Carousel -Part1

Nabaraj saha — Mon, 12 Aug 2019 12:52:14 +0000

My journey with react started more then a year back. I was already doing some web-development with HTML, CSS , Javascript for past 7 years. Then completed the Freecodecamp frontend certification also. React came like this cool kid in frontend development, which was a must then. So, i jumped into it and purchased “Modern React with Redux” from Stephen Grider and learned a lot from it. Also, learned a lot from React for beginners by Wes Bos. I highly recommend both and this article is based on what i learned from both and my past 9 months a React developer for my company.

In React we have to divide our project as small components. Then write those components and stick it into the main App component. We are making a Youtube player app in react. So, we design the layout and create components for different parts.

We are going to build a carousel by using ReactJS.
This carousel I have developed while doing a react project. I tried to
make it simple and also gave multiple options so that can be customize
according to our requirement.

I will explain this tutorial using create react app so that we can save time for the environment setup. We can find create react app setup here.

Assuming that we are successful to install create react app I will add my
carousel in app.js. We can clear predefined files from create react app
application.

We need to add Carousel tag with all the property options. All the options will explain with developing steps. This carousel currently have two view options “fullScreen” and “grid”.Which will look like below images.

Here is the final code for the carousel.

First create a separate folder for carousel named Carousel inside src
folder and add two files index.js, carousel.scss below is the screenshot

Create a basic component like my code

Import Carousel from “./carousel/index” in App.js.
The idea is carousel will display content passing from parent component so we need to display props.children in carousel let’s see that.
In app.js file I added Carousel like this

We will takes slides from parent component and props.children

But this will not display the carousel we need to add functionality and css.
I have added a wrapper around each slides passed from parent so that can control the width and height of slides.

Some useful state and events I declare that I will explain later one by one.

I have given some options to control display and functionality from parent components as props they are :

autoScroll={false} (enable disable autoscroll)
showArrowBg={true} enable arrowbox (may be this option we can replace)
sliderType=”grid” (type of slide fullscreen or grid to control the slider)
classes=”” To add class

Here is our rendering part based on props and state controlling to display arrow. If there is no slide to scroll hiding the right arrow and for first slide left arrow will be disable.

Pause timer on mouse enter the and add refs so that we can use the container width whenever required. We need to get the width of the container to calculate the animation distance. I have use the carousel-inner-container which is use as the container of the slides. As I am using the width of the carousel inner container, added refs to that. It is a good practice to use ref in react instead of using native javascript selectors.

The last part is slides or carousel-item.
Now will discuss the functionality and the css in next part.