Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@lifespikes/laravel-precognition-react

Package Overview
Dependencies
Maintainers
2
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@lifespikes/laravel-precognition-react

A set of React Hooks for Laravel Precognition

  • 0.1.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
2
Created
Source

@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.

Keywords

FAQs

Package last updated on 09 Feb 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc