@lifespikes/laravel-precognition-react

@lifespikes/laravel-precognition-react

A set of React hooks that integrates Laravel Precognition with Inertia.js and simple forms.
The hooks are highly based on laravel-precognition-vue.

Install

Using npm

npm i @lifespikes/laravel-precognition-react

Using Yarn

yarn add @lifespikes/laravel-precognition-react

Using pnpm

pnpm add @lifespikes/laravel-precognition-react

Usage

The package provides two hooks: usePrecognitionForm and useInertiaPrecognitionForm.

Both hooks receive a props object, that follows the following structure:

{
  precognition: { // This is where the precognition configuration
    method: 'put' // PUT, PATCH, POST, DELETE 
    url: 'https://example.com' // URL to send the precognition request
  },
  form: {
    initialValues: {
      example: 'value value'
    } // Initial values of the form
  }
}

Also, both hooks return the next properties and methods related to the usePrecognition hook:

• validator - The validator instance
• validate(name) - Validate a specific field
• isValidating - Whether the form is validating
• isProcessingValidation - Whether the form is processing the validation
• lastTouched - The last touched field
• setLastTouched - Set the last touched field(This will also trigger the validation)
• touched - The touched fields,
• setValidatorTimeout(duration) - Set the timeout for the validation.

1. Using with Inertia

For using with Inertia.js, you need to import useInertiaPrecognitionForm hook.

The useInertiaPrecognitionForm hook uses Inertia.js useForm form helper hook under the hood. So it'll return the same properties and methods as the useForm hook.

Usage example:

import React, { ChangeEvent, FormEvent } from 'react';
import {useInertiaPrecognitionForm} from '@lifespikes/laravel-precognition-react';

type FormFields = {
    name: string;
    email: string;
}

const ExampleForm = () => {
  const route = 'https://example.com/user/1';
  const {
    data,
    setData,
    put,
    processing,
    errors,
    validateAndSetDataByKeyValuePair,
    isProcessingValidation,
  } = useInertiaPrecognitionForm<FormFields>({
    precognition: {
      method: 'put',
      url: route,
    },
    form: {
      initialValues: {
        name: '',
        email: '',
      },
    },
  });

  const onHandleChange = (event: ChangeEvent<HTMLInputElement>) => {
    // This will validate the input and update the form data
    validateAndSetDataByKeyValuePair(
        event.target.name as keyof FormFields,
        event.target.value,
    );
  }

  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    return put(route, {
      onSuccess: () => {
        setData({
          name: '',
          email: '',
        });
      },
    });
  };
  
  return (
    <form onSubmit={onSubmit}>
      <div>
        <input
          type="text"
          name="name"
          value={data.name}
          onChange={onHandleChange}
        />
        {errors.name ? <p>{errors.name}</p> : null}
      </div>
      <div>
        <input
          type="email"
          name="email"
          value={data.email}
          onChange={onHandleChange}
        />
        {errors.name ? <p>{errors.email}</p>: null}
      </div>
      <button type="submit" disabled={processing || isProcessingValidation}>
        Submit
      </button>
    </form>
  );
}

2. Using with a simple form

This is a small example of the usage of the usePrecognitionForm hook with a simple/basic form.

Also, this hook returns the following additional properties:

• data - The form data.
• setData - A function that sets the form data.
• errors - The form errors.
• setErrors - A function that sets the form errors.
• clearErrors - A function that clears the form errors.

Usage example:

import React, { ChangeEvent, FormEvent } from 'react';
import {usePrecognitionForm} from '@lifespikes/laravel-precognition-react';

type FormFields = {
  name: string;
  email: string;
}

const ExampleForm = () => {
  const route = 'https://example.com/user/1';
  const {
    data,
    setData,
    errors,
    validateAndSetDataByKeyValuePair,
    isProcessingValidation,
  } = usePrecognitionForm<FormFields>({
    precognition: {
      method: 'put',
      url: route,
    },
    form: {
      initialValues: {
        name: '',
        email: '',
      },
    },
  });

  const onHandleChange = (event: ChangeEvent<HTMLInputElement>) => {
    // This will validate the input and update the form data
    validateAndSetDataByKeyValuePair(
        event.target.name as keyof FormFields,
        event.target.value,
    );
  }

  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    // Implement your own logic here
  };

  return (
    <form onSubmit={onSubmit}>
      <div>
        <input
          type="text"
          name="name"
          value={data.name}
          onChange={onHandleChange}
        />
        {errors.name ? <p>{errors.name}</p> : null}
      </div>
      <div>
        <input
          type="email"
          name="email"
          value={data.email}
          onChange={onHandleChange}
        />
        {errors.name ? <p>{errors.email}</p>: null}
      </div>
      <button type="submit" disabled={processing || isProcessingValidation}>
        Submit
      </button>
    </form>
  );
}

Notes

• This is not an official package. It's just a personal attempt to create a package that integrates Laravel Precognition with React.