DEV Community: Dharani Jayakanthan - Danny

Form Builder Using Flexible Compound Component in React

Dharani Jayakanthan - Danny — Mon, 09 Sep 2024 17:56:37 +0000

In this blog, we’ll explore how to build a form builder that updates the parent component as the user interacts with the form. This approach can be particularly useful in real-time validation, autosaving, or scenarios where you want to keep the parent state in sync with form inputs immediately as they change.

We will be leveraging Flexible Compound Component pattern for this form builder.

What is Flexible Compound Component

Compound Components are patterns used to create flexible and reusable components where the parent component can control the behavior and render children dynamically.
Compound components allow developers to separate logic and presentation, leading to cleaner, more maintainable code.
This pattern promotes customization without compromising on the separation of concerns
With flexible compound components, you can allow end-users of your component to configure their own behavior while keeping the core logic intact.

How the Compound Component Pattern Works in React

The parent component serves as the core of the compound component, managing the state and providing methods or handlers that the child components can utilize. It passes data to its children either directly as props or, more commonly, through React’s Context API.
Child components within the compound component structure are responsible for rendering individual pieces of the UI. They consume the state and behavior that the parent component provides, allowing for modularity and separation of concerns.
The power of the compound component pattern lies in the composition of multiple child components within the parent component. You can add as many child components as necessary, and they will automatically work together due to the shared context and state from the parent.

Building a Form Builder using Flexible Compound Component: Step-by-Step

With the Flexible Compound Component Design Pattern, we can create a form that directly updates the parent state in real-time.

The parent component holds the form state.
Child components like Input, Checkbox, or Dropdown receive state from the parent and notify the parent when they change.
Form field directly informs the parent of any change.

Let’s create a controlled form that updates the parent state as soon as any input field changes.

1. Setting Up the Parent `Form` Component

The parent Form component will manage the state and provide the state and onChange handler to the child components via context. Each input field will update the form state in real-time.

import React, { useContext, useState } from 'react';
import { FormContext } from './context/formContext';

export const Form = ({ children, onFormChange }) => {
  const [formData, setFormData] = useState({});

  const updateField = (name, value) => {
    const updatedData = {
      ...formData,
      [name]: value,
    };
    setFormData(updatedData);
    onFormChange(updatedData); // Notify parent about the form change immediately
  };

  return (
    <FormContext.Provider value={{ formData, updateField }}>
      <div>{children}</div> {/* No <form> tag, direct div usage */}
    </FormContext.Provider>
  );
};

Explanation:

The Form component manages formData internally.
The updateField function updates the state for the individual fields and immediately informs the parent of changes via onFormChange.
This structure updates the parent directly.

2. Creating the `FormInput` Component

The FormInput component will use the context to retrieve the form’s current state and update the value when the user types.

export function FormInput({ name, label, type = 'text' }) {
  const { formData, updateField } = useContext(FormContext);

  const handleInputChange = (e) => {
    updateField(name, e.target.value);
  };

  return (
    <div>
      <label>{label}</label>
      <input
        type={type}
        name={name}
        value={formData[name] || ''}
        onChange={handleInputChange}
      />
    </div>
  );
}

Here:

FormInput uses the FormContext to access the form’s state and updateField handler.
It immediately updates the field’s value and calls the parent’s onFormChange function through context as the user types.

3. Creating a `FormCheckbox` Component

We can also create a checkbox component to showcase how to manage different form elements.

export function FormCheckbox({ name, label }) {
  const { formData, updateField } = useContext(FormContext);

  const handleCheckboxChange = (e) => {
    updateField(name, e.target.checked);
  };

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={formData[name] || false}
          onChange={handleCheckboxChange}
        />
        {label}
      </label>
    </div>
  );
}

The checkbox works similarly to the FormInput but toggles between true and false based on the checked property.
Again, it informs the parent about the state change instantly via the context.

4. Using the Form Components Together

Now let’s see how to use the form components in the parent component and handle the form changes.

function App() {
  const [formState, setFormState] = useState({});

  const handleFormChange = (updatedData) => {
    setFormState(updatedData);
    console.log('Updated form data:', updatedData);
  };

  return (
    <div>
      <h1>Controlled Form Builder</h1>
      <Form onFormChange={handleFormChange}>
        <FormInput name="firstName" label="First Name" />
        <FormInput name="lastName" label="Last Name" />
        <FormInput name="email" label="Email" type="email" />
        <FormCheckbox name="acceptTerms" label="Accept Terms" />
      </Form>
      <pre>{JSON.stringify(formState, null, 2)}</pre> {/* Display current form state */}
    </div>
  );
}

export default App;

In this example:

App component holds the formState.
The handleFormChange function is passed to the Form component and updates the formState every time any input changes.

Extending the Form Builder

Now that we have a basic controlled form builder that updates the parent state on every change, let’s extend it by adding dynamic fields and validation in coming blogs.

Conclusion

The Flexible Compound Component Design Pattern in React allows you to build modular, controlled form components that can update their parent component in real-time. This pattern:

Easy styling complex form UI's.
Addition of any components in between the Form Component.
Keeps the parent component in sync with the form state.
Is flexible enough to handle dynamic fields, validation, and various input types.

This approach is ideal for scenarios where you need real-time form updates, like form builders, live-editing forms, and autosave applications. It offers a clean and maintainable structure that scales well with complexity.

Demo

Happy building!

Design Layouts - Flexbox

Dharani Jayakanthan - Danny — Mon, 09 Oct 2017 12:18:49 +0000

The flexbox model gives us an efficient way to align, layout and distribute space among elements within document.

Before diving into flexbox property and its functionality, lets have look at flexbox model. Flexbox model got flex container and flex items.

1.Parent Container - Flex Container and

2.Child Container - Flex Items

Flex Container - as the name says Container, it contains items called flex items.

Flex items - are the items within the container.

Getting Started With Flex-Box:

Main Axis - Horizontally laid, along which flex items are laid out. By default
it is horizontally laid.
Cross Axis - The axis perpendicular to the main axis is called the cross axis.
It extends in the cross dimension.
Main Start | Main End - The flex items are placed within the container starting
on the main-start side and going toward the main-end side.
Cross Start | Cross End - "Flex lines" are filled with items and placed into
the container starting on the cross-start side of the flex container and going
toward the cross-end side.

We can easily initiate flex model by simply using the "display" property with value flex (rendered as a block) || inline-flex (rendered as inline).

So to do that lets write a basic html div with parent class "flex-container" and child div with class "flex-item"

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
  <div class="flex-item">flex item 4</div> 
  <div class="flex-item">flex item 5</div> 
</div>

.flex-container {
    display: flex;
    width:600px;
    background-color: lightgray;
}

.flex-item {
    background-color: #FFA500;
    width: 100px;
    height: 100px;
    margin: 10px;
}

We have set display flex and added some basic style to the "flex-item" and the "flex-container".

You might have noticed that the "flex-item" are aligned by main-axis, Which is not a behaviour of div element. The div element is block element which will be aligned vertically. Suppose If we remove the "display:flex" from the styling you will see the difference.

Flex Container Properties.

Flex Container has "Flex-direction || Flex-wrap || Flex-flow || Justify-content || Align-items || Align-content" properties.

We can now look at each one of those:

Flex Direction

Flex Direction have four different values to it, they are

.flex-container {
    flex-direction: row || column || row-reverse || column-reverse;
}

ROW(default) - row aligns the flex-items along main-axis.

COLUMN - aligns the flex-items along cross-axis

ROW REVERSE - flex-items reverse along row.

COLUMN REVERSE - flex-items reverse along column.

FLEX WRAP

.flex-container {
  flex-wrap: wrap || nowrap || wrap-reverse;
  }

Flex wrap is used to wrap or not to wrap all the flex items along main-axis.

Lets increase the flex-items inside container.

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
  <div class="flex-item">flex item 4</div> 
  <div class="flex-item">flex item 5</div> 
  <div class="flex-item">flex item 6</div> 
  <div class="flex-item">flex item 7</div> 
  <div class="flex-item">flex item 8</div> 
</div>

NOWRAP (default) - doesnt wrap any flex items into the container along the same main axis. If we had any number of flex items it will not increase the container size and will try to accomdate all along same main axis.

WRAP - wraps the flex items. i.e., when we add many number of flex items it doesnt make any compromise with the item size and will accomdate all the flex items with its original width and height along main axis first. when there is no space left it will move to the next row to accomdate the flex-items.

WRAP REVERSE - wraps the flex items but in reverse. i.e., when we add many number of flex items it doesnt make any compromise with the item size and will accomdate all the flex items in reverse, with its original width and height along main axis first. when there is no space left it will move to the next row to accomdate the flex-items.

FLEX FLOW

Flex flow is a shorthand property for "flex-direction" and "flex-wrap"

.flex-container {
    flex-flow: row wrap-reverse;
/*
    flex-direction: row;
    flex-wrap: wrap-reverse;
*/
}

Which will produce the same results has direction "row" and wrap "wrap-reverse".

JUSTIFY CONTENT

Justify content will position the flex items. The values of justify content are

.flex-container { justify-content: flex-start || flex-end || center || space-between || space-around
}

FLEX START (default) - By default all the flex items start from the main-start.
FLEX-END - Positions the flex item from the main-end of the main axis.

CENTER - Positions the flex items in the center.

SPACE AROUND - Positions the flex items with equal space around each item.

SPACE BETWEEN - Positions flex-items with equal size between each item.

ALIGN ITEMS

Align items property is similar to that of justify content, but the difference is the axis along which both works. Align item works along the cross axis. To explain this i will do a minor change by increasing the height of the flex-container and removing the height of the flex-items.

.flex-container{
    align-items: flex-start || flex-end || center || stretch || baseline
 }

FLEX START - Flex start value is used to position flex items from the start of the flex container i.e., along the cross axis's - cross start.

FLEX END - Flex END value is used to position flex items from the "END" of the flex container i.e., along the cross axis's - cross end.

STRETCH (default) - Stretches the flex item form the start to the end along cross axis.

CENTER - Centers the flex item along the cross axis.

BASELINE - Initially baseline looks similar to the flex start, but the difference is, the baseline positions the items in the same line with the first line of the flex item. To make it noticebale I have increased the font size of the first flex item.

ALIGN CONTENT

It controls how the flex-items are aligned in a multi-line flex container. We use align self when the flex-wrap property is set to wrap value.

.flex-container {
    align-content : flex-start || flex-end || center || stretch 
}

FLEX START - Aligns the wraped flex items along cross axis's start.

FLEX END - Aligns the wraped flex items along cross axis's end.

CENTER - Aligns the wraped flex items along cross axis's center.

STRETCH (default) - stretches the wraped flex items along cross axis from start to end.

FLEX ITEMS

Flex items are the elements inside the flex container.

The properties of flex items are

"Order || Flex-grow || Flex-shrink || Flex-basis".

ORDER

Order property is used to order the flex items inside the container.

When we want to change the order of the flex-items without changing the html code we can use order property to do so.

By default all the flex items have an order 0. Which displays the elements in the same order,as in html code.

But when the order of a particular flex item is changed to 1, then that item will be ordered/placed at last.And when we have another flex item whose order value is set to 2, this item will be set next to the item with order 1.

.flex-item:nth-child(1){
    order:1;
   }
.flex-item:nth-child(2){
    order:2;
   }

FLEX GROW

By default grow will have the value 0. which is the flex item will not grow inside the container.

.flex-item {
   flex-grow:0;
   }

When the value is set to 1, we can see the flex item grows inside the flex container in main axis. Even when we have the width property set to some value the flex item will grow.

.flex-item {
   flex-grow:1;
   }

FLEX SHRINK

By default shrink will have the value 1. Which mean the flex item will shrink when we resize the browser size.

.flex-item {
   flex-shrink:1;
   }

When the value is set to 0,the flex item doesn't shrink even when the browser size changes.

.flex-item {
   flex-shrink:0;
   }

FLEX BASIS

This defines the default size of an element before the remaining space is distributed.

Flex basis with the value auto means the items size will be as of the content inside the item.

.flex-item {
   flex-basis : auto; 
   }

Flex basis with the value means the items size will be as of what is defined in the flex-basis value.

.flex-item {
   flex-basis : 100px; 
   }

FLEX

Flex property is shorthand for flex-grow, flex-shrink and flex-basis.

.flex-item {
   flex : 0 1 auto;
/* 
   flex-grow : 0;
   flex-shrink : 1;
   flex-basis : auto;
*/
    }

This is same as saying flex-grow : 0, flex-shrink : 1 and flex-basis : auto.

ALIGN SELF

We use align self to target a particular item and change the position of a single flex-item along the cross-axis, without affecting the neighboring flex-items.

Align self is same as align item, except that align self targets particular item.
Values used for align self are "auto || flex-start || flex-end || center || baseline || stretch". We will not go into each one in detail because this issame as align items. Lets have only one example to make this more clear.

.flex-item:nth-child(3) {
   align-self : flex-end;
    }

You can see only targetted item is positioned to the flex end.

Understanding Margin Auto

When we add margin auto to the flex item, it centers the flex item by taking all the avilable space.

.flex-item { 
    margin : auto;
}

When we add two more flex items and when we target a particular flex item , that particular item taxes upa ll the space available.

.flex-item:nth-child(1) { 
    margin-right : auto;
}

Note that everything works perfect when the direction is set to row ,but when we change the direction to column all the properties will behave differently. I will try to cover all those, along with a project in which we will use flexbox.

Flexbox layout is good at small-scale layouts, whereas the (emerging) Grid layout is intended for larger-scale layouts.

There are a few flexbox playgrounds available online for experimenting:

Flexbox Playground
Flexy Boxes
Flexbox Properties Demonstration
Flexbox Froggy

Intro To Prototypal Inheritance - JS

Dharani Jayakanthan - Danny — Sat, 07 Oct 2017 05:00:06 +0000

Inheritance in JS

In this article I will try to give an introduction to protypal inheritance.

As an "optional" pre-requisite, you can glance at my previous post on "Intro To Prototypes".

Intro To Prototype - Js

Prototype Chain

When it comes to inheritance, JavaScript only has one construct: objects. Each object has a private property (referred to as [[Prototype]] ) which holds a link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. By definition, null has no prototype, and acts as the final link in this prototype chain.

In Js, Inhertitance is possible only because of this prototype chain.

Lets look at this with an example. I will try my best to explain the concept of prototypal inhertitance with this example. Initially We will create a student Constructor function, which takes three values first,last and age.

var Student = function(first,last,age){
this.name = {
first,
last
};
this.age = age;
}

Whenever we create a function Js engine creates two object for us,

One is the function object itself and
Prototype object.

We can use the prototype property created for us by the Js engine using ".prototype" - reference property pointing to the prototype object.

So lets add a function "sayMessage" to the prototype object created for us, by Js engine.

var Student = function(first,last,age){
this.name = {
first,
last
};
this.age = age;
}
Student.prototype.sayMessage = function(){
return "Hello!! "+this.name.first+" "+this.name.last+" your age is "+this.age+"."
}

Lets create an object using the function Student (Constructor).

var studentOne = new Student("dharani","jayakanthan","six");
studentOne.sayMessage();
//"Hello!! dharani jayakanthan your age is six."

The way this works is when we call the "sayMessage" function, Js engine will initially look at the "Student" object. When there is no function in the student object, Js engine will look for the "sayMessage" function in prototype object.

Using call function to inherit

We will now create another function called "Faculty". Which will take the same parameters as "Student" but with an additional formal parameter salary.

var Faculty = function(first,last,age,salary){
Student.call(this,first,last,age);
this.salary = salary;
}

What we are doing in the above code is, we want Faculty constructor to take the same paramaters as Student contructor. So we are inheriting "Student" constructor using the call function, and passing the parameters that "Faculty" constructor inherits from students.

This "call" function basically allows you to call a function defined somewhere else, but in the current context. The first parameter specifies the value of this that you want to use when running the function, and the other parameters are those that should be passed to the function when it is invoked.

When we want to inherit a constructor with no formal parameters, we can do that by same call function. But we need to provide this reference as parameter in call reference.

Ex : "ConstructorWithNoParameter.call(this)".

So that we now have inherited the "Student" constructor. But we havent changed the link of the "Faculty" constructors prototype object. Now the "Faculty" constructors prototype object will have a constructor reference which points back to the constructor itself. So we will not get access to the "sayMessage" function, which we created in "Student" constructors prototype object.

To get the "Faculty" to inherit "Student" prototype object,

We need to add,

Faculty.prototype = Object.create(Student.prototype);

We now inherited the student prototype, But when you look close into the code
there is one more thing we need to do.

What we have done is inherited "Student" prototype Object. The "Student.prototype" will have an property called "constructor" which will point back to the "Student" constructor itself.

To verify this, you can add these lines to the code,


Faculty.prototype.constructor;
/*
  function(first,last,age){
  this.name = {first,last};
  this.age = age;
  }
*/
(Student.prototype.constructor === Faculty.prototype.constructor) ? true : false;
//true

To change this reference we point the "Faculty.prototype.contructor" to the "Faculty" function.

Now when you check it will return false,

Faculty.prototype.contructor = Faculty;
(Faculty.prototype.constructor === Student.prototype.constructor) ? true : false;
//false

Now lets put it all together

// Student Constructor
var Student = function(first,last,age){
  this.name = {first,last};
  this.age = age;
  }
Student.prototype.message = function(){
  if(this.salary){
      return this.name.first+" "+this.name.last+" "+"is "+this.age+" years old. And earns "+this.salary;
  }
  else{
      return this.name.first+" "+this.name.last+" "+"is "+this.age+" years old";
  }
  }
var studentOne = new Student("dharani","jayakanthan","20");

// Faculty Constructor
var Faculty = function(first,last,age,salary){
  Student.call(this,first,last,age);
  this.salary = salary;
}
Faculty.prototype = Object.create(Student.prototype);
Faculty.constructor = Faculty();
var facultyOne =  new Faculty("simon","peter","70","820,000");
facultyOne.message();
// simon peter is 70 years old. And earns 820,000
studentOne.message();
// dharani jayakanthan is 20 years old

This is not the only way of create inheriting class.The new ECMAScript features that allow us to do inheritance more easily in JavaScript. But they are not supported very widely by all the browsers yet. Code we discussed in this articles are supported as far back as IE9 or earlier.

Intro To Prototype - Js

Dharani Jayakanthan - Danny — Fri, 06 Oct 2017 01:09:53 +0000

Prototype

This post is an intro to Js - Prototype Object.

Whenever we create a function in javascript, javascript engine creates two object for us.

The two objects that are created when Js engine process the function are ,

Function object which inturns the function itself ,
Prototype Objects.

What is prototype

The prototype in Js is used primarily for inheritance, you add methods and properties on a function’s prototype property to make those methods and properties available to instances of that function.

function foo() {
console.log("Hello!!");
}
// foo.prototype

Whenever Js engine creates the prototype object it also creates a property in function called prototype. With the help of this prototype property in function, we can access the prototype object created for that function.

For example we have seen foo function which has a property called prototype pointing to prototype object. To make use of the prototype object we create an object using the new keyword.

var myObj = new foo();
// myObj

When we create a object myObj Js engine creates an object for us which in default have an object called "proto". Which in turns points to the initial prototype object created by the function.

Working With Proto

Now that we know there is proto object created by Js engine whenever we create a object to see how it function,lets create a property "say" in the "myObj" object with value "Hi from myObj itself".

function foo(){}
var myObj = new foo();
myObj.say = "Hi from myObj itself";

When we access "myObj.say" we know that it will return the value "Hi from myObj itself".We create another object to the proto object with the same property but with different value "Hi from proto object"

function foo(){}
var myObj = new foo();
myObj.__proto__.say = "Hi from proto object";

Accessing the "myObj.proto.say" will return "Hi from proto object".

function foo(){}
var myObj = new foo();
myObj.say = "Hi from myObj itself";
// Hi from myObj itself
myObj.__proto__.say = "Hi from proto object";
// Hi from proto object
delete myObj.say;
// true
myObj.say
// Hi from proto object

But when we delete the "myObj.say" and access the same, the Js engine go look at the "proto" object to see, if there is any propert "say". Which will find the property "myObj.proto.say", with the value "Hi from proto object" and this will be returned while accessing "myObj.say".

Now that we know whenever we create an object, Js engine creates an another object for us called prototype. We can access the prototype using ".prototype" from the function. But when we create an object using new keyword, Js creates "proto", which points to the prototype object.

Whenever we look for an property in an object, the Js engine will return it- if it finds it in the object itself. If there is no such property, Js engine will look upto the prototype object.

DEV Community: Dharani Jayakanthan - Danny

Form Builder Using Flexible Compound Component in React

What is Flexible Compound Component

How the Compound Component Pattern Works in React

Building a Form Builder using Flexible Compound Component: Step-by-Step

1. Setting Up the Parent Form Component

2. Creating the FormInput Component

3. Creating a FormCheckbox Component

4. Using the Form Components Together

Extending the Form Builder

Conclusion

Design Layouts - Flexbox

Getting Started With Flex-Box:

Flex Container Properties.

Flex Direction

FLEX WRAP

FLEX FLOW

JUSTIFY CONTENT

ALIGN ITEMS

ALIGN CONTENT

FLEX ITEMS

ORDER

FLEX GROW

FLEX SHRINK

FLEX BASIS

FLEX

ALIGN SELF

Understanding Margin Auto

Intro To Prototypal Inheritance - JS

Inheritance in JS

Prototype Chain

Using call function to inherit

Intro To Prototype - Js

Prototype

This post is an intro to Js - Prototype Object.

What is prototype

Working With Proto

1. Setting Up the Parent `Form` Component

2. Creating the `FormInput` Component

3. Creating a `FormCheckbox` Component