Custom components

What are custom components?

Native HTML elements are the built-in elements that are part of the HTML specification, such as the p element for a paragraph or the div element for a container. These elements are used to create the basic structure and content of a web page.

Custom React components, on the other hand, are user-defined components that are created using the React framework. These components allow you to reuse code and abstract complex UI elements into reusable pieces. They are typically defined using a combination of JavaScript and JSX, which is a syntax extension to JavaScript that allows you to write HTML-like syntax directly in your JavaScript code.

One key difference between native HTML elements and custom React components is that native HTML elements are passive, meaning they are rendered by the browser and cannot be changed or interacted with by your code. Custom React components, on the other hand, are active, meaning they can be manipulated and controlled by your code. This allows you to create more interactive and dynamic user interfaces.

Also, custom components have an internal state controlled by state management, which means that they will be updated when the value changes, however, native elements are not, because you can use a reference to the element to update its value.

Let's see some examples of custom components.

• Datepickers - are components that allow you to select a date.
• Timepickers - are components that allow you to select a time.
• Sliders - are components that allow you to select a range of values.
• Selects, multi-selects components - are components that allow you to select single or multiple values.
• Drag and drop components - are components that allow you to drag and drop items.

How to use custom components with Createform

To use custom components with Createform, you need to use setFieldValue function to set the field value, and setFieldTouched on blur event.

How to use custom components with useField

When we are creating a form, it doesn't matter whether we use native HTML elements or not. It is just a function that creates a store and returns a function to manage the form. So we don't need to worry about it for now. We just need to create the form store, also we can provide the initial values, initial errors, initial touched, and the validation schema, but for now, we will just provide the initial values.

import { createForm } from "@createform/core";
 
const useUserForm = createForm({
  initialValues: {
    names: [],
  },
});

import { Wrapper } from '@createform/react'
import Select from 'select-component'
 
funtion UserForm(){
  const { register, handleSubmit,setFieldValue } = useUserForm()
 
  const onSubmit = (data) => {
    console.log(data)
  }
 
  return (
  <form onSubmit={handleSubmit(onSubmit)}>
    <Select onChange={e=>setFieldValue('select',e)}
      value={values.select}
      options={[
        { value: "John", label: "John" },
        { value: "Jane", label: "Jane" },
        { value: "Jack", label: "Jack" },
      ]}
    />
  </form>
  )
}